显示空行 jQuery dataTables答案

【问题标题】：Show empty rows jQuery dataTables显示空行 jQuery dataTables
【发布时间】：2013-08-23 13:37:09
【问题描述】：

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

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

【问题讨论】：

正如@Jakub 的编辑所说，这将完全搞乱排序和过滤 - 你不能保证该行将保持在底部。如果你禁用这两个，那么也许，但你可能仍然会看到奇怪的效果。如果您这样做的原因是为了确保面板尺寸，我会使用一些 CSS 来保持尺寸。

标签： javascript jquery ajax datatables

【解决方案1】：

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

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

【讨论】：

我对排序也有同样的想法。我已经想到了那个解决方案，我只是不确定是否有更优雅的方式来做到这一点。谢谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

它确实有效，但我相信你是正确的。每次更改/选择数据时，都需要调用它。我做了一个小提琴，它确实有效。
这个问题是行不是空的，也不是由DataTables控制的......

【解决方案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。

【讨论】：