根据下拉值显示表格行

Question

我想通过从下拉列表中选择行数来增加或减少表格的行数

例如，如果我从下拉列表中选择 25，则仅显示前 25 行

我想用这个 plugin 。但不知道怎么用这个

这是我的代码jsfiddle

$('#nrows').change(function(){
    rows = $(this).val();
    alert(rows + ' Number of rows displayed using plugin' );
    $('#table').dataTable();

});

请告诉我如何只显示选定的行数

Answer 1

如果您在初始化时这样做，您将使用 pageLength property：

$('#nrows').change(function () {
    rows = $(this).val();
    $('#table').dataTable({'pageLength':rows});
});

jsFiddle：http://jsfiddle.net/Wmfax/4/

话虽如此，这只会在您第一次初始化数据表时起作用；之后，您需要update the page length via the API 并重新绘制表格。如果您尝试多次使用上述内容，则在第二次切换nrows 下拉菜单后，您将收到一条错误消息“无法重新初始化 DataTable”。

这是一个快速而肮脏的示例，它在更改处理程序之外初始化 DataTable，然后只更改其中的页面长度：http://jsfiddle.net/Wmfax/6/

老实说，我建议不要创建自己的 nrows 选择下拉菜单；在 DataTables 中自定义它们很容易，然后您不必担心两者之间的冲突或覆盖它们的 UI。