data attributes in a bootstrap-table data table causes an infinite loops

Question

I'm trying to output data in a table using bootstrap-table. It outputs the data, but causes an infinite loop while saying "loading, please wait". I'm also using twig if that's helpful. I'm not sure what I'm doing wrong, since followed the template at https://bootstrap-table.com/docs/getting-started/usage/

here's my code

<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">Site Id</th>
                            <th data-field="domain">Domain Name</th>
                            <th data-field="total">Total Students</th>
                        </tr>
                    </thead>
                    {% for si in data.dashboard.SiteInfo %}
                        <tbody>
                            <tr>
                                <td>{{si.SiteId}}</th>
                                <td>{{ si.SiteName }}</td>
                                <td>{{si.TotalStudents}}</td>
                            </tr>
                        </tbody>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>    
</div>

Answer 1

You are creating new <tbody> everytime Try to create that before for loop

<tbody>
{% for si in data.dashboard.SiteInfo %}
           <tr>
               <td>{{si.SiteId}}</th>
               <td>{{ si.SiteName }}</td>
               <td>{{si.TotalStudents}}</td>
             </tr>
                        
 {% endfor %}
</tbody>