为什么引导动态表分页不起作用？

Question

我正在处理 Bootstrap 表格分页，但我发现它在静态内容上运行良好，但在动态内容上却完全不工作。

静态代码

<script>
 $(document).ready(function() {
     $('#example').DataTable();
 });
</script>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>USN</th>
            <th>Name</th>
            <th>Branch</th>
            <th>Batch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
        </tr>
    </tbody>
</table>

动态表

<script>
$(document).ready(function() {
   $('#example').DataTable();
});
</script>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>USN</th>
            <th>Name</th>
            <th>Branch</th>
            <th>Batch</th>
        </tr>
    </thead>
    <tbody id="user_list">
    </tbody>
</table>

<script>
var ref = firebase.database().ref("Students/");
var newTable='';

ref.on('child_added', function(snapshot) {
    snapshot.forEach(function(snap) {

        var usn = snap.val().usn;
        var name = snap.val().studentName;
        var colname = snap.val().collegeName;
        var branch = snap.val().branch;
        var batch = snap.val().batch;   

        newTable+='<tr data-value='+usn+' id='+usn+'>';
        newTable+='<td>'+usn+'</td>';
        newTable+='<td>'+name+'</td>';
        newTable+='<td>'+branch+'</td>';
        newTable+='<td>'+batch+'</td>';
        newTable+='</tr>';
        document.getElementById('user_list').innerHTML=newTable;
    });
 });
</script>

所以在我上面的代码中，您可以在静态内容中看到它能够计算行数，但在动态内容中它无法计算表中有多少行，因为表是动态创建的。

请仔细阅读我上面的代码，如果您对此有任何解决方案，请告诉我。

谢谢

Answer 1

您的代码无法正常工作，因为您在文档准备就绪时调用了初始化对象（使用$('#example').DataTable();），在生成数据之前。

你有（至少）两个选择：

1. 生成动态数据后调用$('#example').DataTable();。
   比如：

   ref.on('child_added', function(snapshot) {
       snapshot.forEach(function(snap) {
           var usn = snap.val().usn;
           // more code
           document.getElementById('user_list').innerHTML=newTable;
           $('#example').DataTable();
       });
   });
   

2. 您使用snapshot 函数生成的不是表格而是数据集。然后，在初始化对象中使用内置的data选项，传入数据集。

   var dataSet = [
       [ "Tiger Nixon", "System Architect", "Edinburgh", "61" ],
       [ "Garrett Winters", "Accountant", "Tokyo", "63" ]
   ];
   
   $('#example').DataTable( {
       data: dataSet,
       columns: [
           { title: "Name" },
           { title: "Position" },
           { title: "Office" },
           { title: "USN" }
       ]
   } );
   

Here you will find the documentation 用于第二个选项。

希望对你有帮助！