初始化bootstrap表时如何解决ERROR Cannot read properties of undefined (reading 'field')?

Question

我正在尝试将引导程序表应用于我在 API 调用中创建的现有表，问题是当我这样做时

$('#TotalScannedContent').bootstrapTable();

它给了我以下错误

Cannot read properties of undefined (reading 'field')

这是我使用的引导表版本

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

所以基本上我首先做的是将表格标签放在 HTML 中

<table id="TotalScannedContent" class="table table-fit table-borderless" 
                                data-classes="table"
                                data-smart-display="true">
</table>

这里是我进行 API 调用的地方，它基本上是在表格中插入标题和信息

function fetchData(params, page = 1){
            
                var totalScanned = {!! json_encode(route('ScanningSummaryReportTotalScanned', array()), JSON_HEX_TAG) !!};
                const headers = `
                        <thead class="bg-orange-light ">
                            <tr>
                                <td scope="col" data-sortable="true"> Person Id </td>
                                <td scope="col" data-sortable="true"> Family Name</td>
                                <td scope="col" data-sortable="true"> First Name </td>
                                <td scope="col" data-sortable="true"> Email </td>
                                <td scope="col" data-sortable="true"> Country </td>
                                <td scope="col" data-sortable="true"> 
                                    Date Registered 
                                    <a data-toggle="tooltip" data-placement="top" title="If this column is empty means that this person is a non live participant"><i class="fas fa-question-circle fa-lg"></i></a>
                                </td>
                                <td scope="col" class="date-printed" hidden="true" data-sortable="true"> Badge Printed 
                                    <a data-toggle="tooltip" data-placement="top" title="This column shows the date of to the first printed badge"><i class="fas fa-question-circle fa-lg"></i></a>
                                </td>
                                <td scope="col" data-sortable="true"> Date Scanned </td>
                            </tr>
                        </thead>
                        `
                $('#TotalScannedContent').append(headers);
                postData(totalScanned + '?page=' + page, params)
                    .then(res => {
                        printed = true
                        //Pagination
                        var template = $('#paginationList').html(), view = "";
                        for (var i = 1; i <= res.last_page; i++) {
                            const active = (res.current_page == i) ? 'active' : '';
                            view += template.replace('%PAGE%',i).replace('%ACTIVE%',active);
                        }
                        $(".page-item:has(.page-link-nro)").remove()
                        $('.pagination').append(view)
                        $(".page-link-nro").click(function() {
                            fetchData(params, $(this).html()) 
                        })
                        
                        let totalScannedInfo = ""
                        res.data.forEach(scan => {
                            const family_name = scan.FamilyName? scan.FamilyName : ' ',
                                first_name = scan.FirstName? scan.FirstName : ' ',
                                email = scan.Email? scan.Email : ' ',
                                country = scan.Country? scan.Country : ' ',
                                date_registered = scan.Date_Registered? scan.Date_Registered : ' ',
                                date_scanned = scan.Last_Scanned? scan.Last_Scanned : ' ',
                                badge_printed = scan.Badge_Printed? scan.Badge_Printed : ' ';
                                if(badge_printed != ' ')printed = false
                            totalScannedInfo += `
                                <tr>
                                    <td > ${scan.Person_Id} </td>
                                    <td> ${family_name} </td>
                                    <td> ${first_name} </td>
                                    <td> ${email} </td>
                                    <td> ${country} </td>
                                    <td> ${date_registered} </td>
                                    <td class="date-printed" hidden="true"> ${badge_printed} </td>
                                    <td> ${date_scanned} </td>
                                </tr>
                            `
                        })
                        $('#TotalScannedContent').append(`<tbody>${totalScannedInfo}</tbody>`);
                        $(".date-printed").attr("hidden",printed);
                        $('[data-toggle="tooltip"]').tooltip()
                        $('#TotalScannedContent').bootstrapTable();  
                        return;
                    });
            }