Question

在搜索表格或导航到表格的最后一页时，pageLength设置的结果可能会更少，因此表格会在高度上闪烁。我想通过填充空行的缺失行来防止这种情况。我怎么能这样做？

Answer 1

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

启用垂直（y）滚动时，DataTables将强制执行表格视口的高度始终为给定高度（对布局很有用）。但是，在过滤数据时，这看起来很奇怪到一个小数据集，页脚进一步“浮动” 下。此参数（启用时）将导致DataTables崩溃当结果集适合时，表的视口向下给定Y高度。

你可以像这样使用它：

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

这方面的一个例子是http://live.datatables.net/ukiyek/115/edit#javascript,html

更新：

您还可以将表格高度设置为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>';
}

小提琴：http://live.datatables.net/ruviwabu/1/edit

如何将页面长度保持在较少的结果？

2 个答案: