Question

我正在使用jQuery DataTables插件。我想知道是否有一种方法可以向表中添加空行，以便表格总是显示50行，天气是否存在这些行中的数据？

例如，如果我进行AJAX调用并返回5个条目，我希望能够显示45个空行。或者如果调用返回49个条目，我仍希望在表格底部显示1个空行。

Answer 1

使用ajax调用的结果填充数据源后，您可以计算源中元素的数量，如果它小于50，则可以向其添加一些空记录。

编辑：第二个想到它可能不是最好的主意，因为它会搞砸排序。

Answer 2

很难知道没有代码片段和你正在做什么，但你可以在服务器或客户端修改它。

您可以强制调用在服务器上返回50行，无论填充了多少行，或者您可以接收响应，然后在客户端修改它。

Answer 3

有人可能有更好的解决方案，但假设您至少有一个条目，这应该“有效”。

for (var i=numEntries; i < 50; i++) {
    $("#tableID tr:last").after('<tr><td>Empty Row</td></tr>');
}

JSFiddle：http://jsfiddle.net/yXvmX/2/

Answer 4

我发现在这种情况下可以使用名为“drawCallback”的回调函数。 https://datatables.net/reference/option/drawCallback 每次dataTable重绘一个表页面内容就像你做的那样排序，它将被称为。

$("#yourTable").DataTable({
                    "columns":columns,
                    "ajax": {
                        "url": url
                        "dataSrc" : function (json) {   return json;}
                    },
                    "searching": false ,
                    "pageLength": rowNumPerPage,
                    "lengthChange": false,
                    "autoWidth": false,
                    "order": [[ 0, "asc" ]],

                    "drawCallback": function( settings ) {
                        //for maintaining the same height every page, 
                        //add empty row to table 
                        var api = this.api();

                        var currentPageDataSet = api.rows( {page:'current'} ).data() ;
                        if(currentPageDataSet.length < rowNumPerPage){     
                            var $tbody = $('#yourTable tbody');
                            for(var i = 0; i< rowNumPerPage-currentPageDataSet.length; i++){
                                var isEven = (currentPageDataSet.length+(i+1))%2 === 0;
                                var $tr = (isEven)? $('<tr role="row" class="even"></tr>') : $('<tr role="row"  class="odd"></tr>');
                                for(var j=0; j< columns.length; j++){
                                    $tr.append('<td style="color:white;" >_</td>');
                                }
                                $tbody.append($tr);
                            }
                        }

                    }
                });

在这个回调函数中，我所做的是计算当前页面的行号数据，如果行号小于最大页面行号，则我们追加空行元素到tbody。

显示空行jQuery dataTables

4 个答案: