如何用一个 html select 框更改两个 jQuery 数据表中的条目数？

Question

有没有办法在一个页面的所有数据表上显示选定的条目数，而不仅仅是单独显示？

这是个人数据表：

var stockTable = $('#source').dataTable({
    "aaData": src,
    "sPaginationType": "full_numbers",
    "bFilter": true,
    "bProcessing": true,
    "bRedraw":true,
    "bDestroy":true,
    "bInfo":true,
    "bLengthChange":true,
    "aoColumns": [
        {"mData": "Title"},
        {"mData": "ID"},
        {"mData": "Language"}]
});

var catalogTable = $('#destination').dataTable({
    "aaData": dest,
    "sPaginationType": "full_numbers",
    "bFilter": true,
    "bProcessing": true,
    "bRedraw":true,
    "bDestroy":true,
    "bInfo":true,
    "bLengthChange":true,

    "aoColumns": [

        {"mData": "Module Title"},
        {"mData": "Module ID"},
        {"mData": "Module Language"}
    ],
    "oLanguage": {
    "sEmptyTable" : "<h1>Drag and Drop Courses Here</h1>"
}
});

如果有另一个类似的数据表，我有一个选择框如下：

<div class="filterArea borderBottomMedium clearfix">
<div class="no_padding entriesLength">
    <label>Show</label>
    <select id="entries" class="form-control">
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
      <option>50</option>
    </select>
    <label>entries</label>
</div>

我可以使用选择来显示所有数据表中的条目数吗？bLengthChange 为真，我可以更改两个表 individually.but如何将它们一起更改为在中选择的条目数选择框？

Answer 1

由于您使用的是 "Show N entries" 数据表下拉列表中的单独下拉列表，因此您需要将更改事件绑定到下拉列表，然后更改数据表中的下拉列表。数据表上的下拉列表的名称以与数据表相同的 id 开头。因此，例如，如果您的数据表具有 id="example"，则 "Show N entries" 名称以 "example".

开头

你可以给你的表 ID 都以同一个词开头（就像我的例子），或者你可以在你的 JQuery 绑定中使用多个名称 selector。

您需要确保所有表格都具有与独立下拉列表相同的下拉值。您可以使用 lengthMenu 选项来做到这一点：

$('.table').DataTable( {
    "lengthMenu": [[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50, "All"]]
} );

然后您可以将独立的下拉菜单与更改事件相关联，然后 select 每个数据表的下拉菜单中的相同值（并触发更改事件，以便新 selected 的行数事件发生）

$("#entries").on('change',function() {
   var valSelected = $(this).val();
   $("select[name^='example']").each(function(i, val) {
       $(this).val(valSelected);
       $(this).change();
   });
});

请参阅此 fiddle 以获取完整的工作示例：JSFiddle 示例

如何用一个 html select 框更改两个 jQuery 数据表中的条目数？

How to change number of entries in two jQuery dataTables with one html select box?

datatable

jquery