为什么引导动态表分页不起作用? [英] Why bootstrap dynamic table pagination is not working?

问题描述

我正在研究 Bootstrap 表分页，但有一件事我发现它在静态内容上运行良好，但在动态内容中它根本不起作用.

I am working on the Bootstrap table pagination, but one thing i have found it's working well on static content but in dynamic content it's not at all working.

静态代码

<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>

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

So above of my code you can see in static content it's able to calculate row count but in dynamic content it's not able to calculate how many rows are there in the table as tables are created dynamically.

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

Please kindly go through my above code and let me know if you have any solution for this.

谢谢

推荐答案

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

Your code is not working because you invoke the initialisation object (with $('#example').DataTable();) in the moment the document is ready, before the data is generated.

您(至少)有两个选择:

You have (at least) two options:

1. 在生成动态数据后调用 $('#example').DataTable();.
   类似的东西:

1. Call $('#example').DataTable(); after you generate the dynamic data.
   Something like:

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();
    });
});

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

You use your snapshot function to generate not the table but a data set. Then, use the built-in data option in the initialisation object, passing in the data set.

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

您可以在此处找到第二个选项的文档.

希望有帮助！

这篇关于为什么引导动态表分页不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！