如何在结果较少的情况下保持页面长度？

Question

当搜索 table 或导航到 table 的最后一页时，pageLength 设置的结果可能会更少，因此 table 会缩小高度.我想通过用空行填充缺失的行来防止这种情况发生。我该怎么做？

Answer 1

您可以将 bScrollCollapse 属性与 sScrollY 一起使用。

When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height.

你可以这样使用它：

var table = $('#example').dataTable({
    "sScrollY": "400",
    "bScrollCollapse": false
});

这里有一个例子http://live.datatables.net/ukiyek/115/edit#javascript,html

更新：

您也可以将table高度设置为100%，这样整个区域就会被填充：

var table = $('#example').dataTable({
    "sScrollY": "400",
    "bScrollCollapse": false,
    "fnDrawCallback": function() {
       $(this).attr("height","100%");
    }
});

示例 here

更新 2：

在此主题中准确找到您要查找的内容 http://www.datatables.net/forums/discussion/4112/possible-to-keep-datatable-height-static-even-when-filtering

看看这个 example，它在末尾添加了空行。

Answer 2

添加行似乎比设计固定滚动区域（如 MavRoSCy 解决方案 n.1）更简单和更通用的解决方案。

所以，这就是适合我的方法。

$(document).ready(function () {

  var table = $('#example').dataTable({});

  table.api().on('draw', function () {
        var info = table.api().page.info(),
          rowsOnPage = info.end - info.start,
          missingRowsOnPage = info.length - rowsOnPage;

        if (missingRowsOnPage > 0) {
          for (var i = 0; i < missingRowsOnPage; i++) {
             table.find('tbody').append(buildEmptyRow(6));
          }
        }

      });
});

function buildEmptyRow(columnsCount) {
    return '<tr class="empty">' + Array(columnsCount + 1).join('<td><div>&nbsp;</div></td>') + '</tr>';
}

Fiddle: http://live.datatables.net/ruviwabu/1/edit

如何在结果较少的情况下保持页面长度？

How to keep page length where there is fewer results?

datatables