javascript - 显示空行 jQuery dataTables

Question

我正在使用jQuery DataTables插件。我想知道是否有办法向表中添加空行，以便表始终显示 50 行，天气这些行中是否有数据？

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

Answer 1

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

编辑：再三考虑这可能不是最好的主意，因为它会搞砸排序。

Answer 2

Someone may have a better solution, but this should "work" assuming you have at least 1 entry.

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

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

Answer 3

如果没有代码片段以及您在做什么，很难知道，但您可以在服务器端或客户端对其进行修改。

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

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。