根据下拉值显示表格行

Posted 2023-05-09

【中文标题】根据下拉值显示表格行

【英文标题】：display tables row according to drop down value

【发布时间】：2014-07-30 00:53:09

【问题描述】：

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

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

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

这是我的代码jsfiddle

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

);

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

【参考方案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。

【讨论】：

@user3713959 答案是否满足您的需求，还是有其他要求？

这在 jsfiddle 上工作正常，但不适用于我的代码。我正在为表使用引导程序