html表格异步处理和页面加载器

Question

在我的表从数据库中获取数据时，如何放置一些gif或加载器。我只想拥有一个onload函数或在加载表时禁用它。

这是我当前的表，可读取5k行：

<table width="100%" height="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Employee Class</th>
            <th>Job Category</th>
            <th>Hire Date</th>
            <th>Compensation Grade</th>
            <th>Job</th>
            <th>Status</th>
            <th>Personal Details</th>
            <th>Managers Details</th>

        </tr>
    </thead>
    <tbody>
        {% for employee in employees %}
        <tr class="odd gradeX">
            <td>{{employee.empID}}</td>
            <td>{{employee.name}}</td>                                     
            <td>{{employee.empClass}}</td>
            <td>{{employee.jobCat}}</td>
            <td>{{employee.hireDate}}</td>
            <td>{{employee.compGrade}}</td>
            <td>{{employee.job}}</td>
            <td>{{employee.empStatus}}</td>
            <td>
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Show</button>
            </td>  
             <td>
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Show</button>
            </td>                                                                        
        </tr>
        {% endfor %}
</table>

    

任何建议或评论。 TIA