bootstrap-table配置data属性渲染表格时出现无限加载死循环问题

你遇到的无限加载问题是代码存在多处DOM结构和bootstrap-table配置错误导致的，具体问题和修复方法如下：

存在的问题 #

• <tbody>标签放在Twig的for循环内部，导致每条数据生成独立的<tbody>节点，bootstrap-table要求单表格仅允许一个<tbody>，结构异常会触发加载死循环
• 「Site Id」对应的表头<th>未配置data-field属性，bootstrap-table要求所有表头列需配置和数据对应的data-field做字段映射，缺失会导致解析失败
• 第一列的单元格结束标签书写错误，将</td>误写为</th>，DOM结构不规范引发解析异常
• data-page-list配置中的all未加引号，属于非法数组格式，配置解析失败也会触发加载异常

修正后代码 #

<div class="row mt-md-3">
    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="card-title pt-3 text-center h4">Site List</div>   
                <table  
                        data-toggle="table"
                        data-pagination="true"
                        data-search="true" 
                        data-page-list="[10, 25, 50, 100, 'all']"
                        data-show-columns="true"
                        >
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="siteId">Site Id</th>
                            <th data-field="domain">Domain Name</th>
                            <th data-field="total">Total Students</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for si in data.dashboard.SiteInfo %}
                        <tr>
                            <td>{{si.SiteId}}</td>
                            <td>{{ si.SiteName }}</td>
                            <td>{{si.TotalStudents}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>    
</div>

内容的提问来源于stack exchange，提问作者jsuke06