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

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" } ] } ); 

在这里，您将找到第二个选项的文档 。

希望能帮助到你！