datatable - 同一页面上有多个表，但只有一个响应答案

【问题标题】：datatable - multiple tables on same page, but only one is respondingdatatable - 同一页面上有多个表，但只有一个响应
【发布时间】：2016-12-22 15:19:08
【问题描述】：

我的页面上有三个数据表：

<table class="driving-table">
  -- table #1--
</table>
<table class="driving-table">
  -- table #2--
</table>
<table class="driving-table">
  -- table #3--
</table>

这是我用来初始化表格的 JS：

var table = $('table.driving-table').DataTable({
    rowReorder: true,
    dom: 'Bfrtip',
    "bFilter": true,
    buttons: [
        'copyHtml5', 'excelHtml5', 'pdfHtml5', 'print'
    ],
    "paging":   false, //Hide the "Show entries" and "Paging"
    "bInfo": false                  
});

//Searching:
$('#top_search').on( 'keyup', function () {
        table.search( this.value ).draw();
});

但是，使用上面的方法，我只能让search 输入在表#3 上工作。 buttons 也是如此

Here is a jsFiddle 正在显示问题。

如您所见，只有底部表格是可搜索的，并且只有底部表格按钮被放置在.button-holder。

我做错了什么？

【问题讨论】：

首先，不要对多个DOM 元素使用相同的id
啊，好点子。不知道为什么我在表格中有 id =drivingtable，因为我不使用它。我会删除它。
另外，我认为您不应该像这样初始化 3 个不同的数据表。我会创建 ID drivingtable1, drivingtable2, drivingtable3，然后用 3 个不同的对象 table1, 2 and 3 分别初始化所有 3 个。但这只是我。也许有更简单的方法。
@philantrovert 根据他们的官方文档，这是初始化多个表的方式：datatables.net/examples/basic_init/multiple_tables.html
我更新了小提琴。我认为它是有效的，但是如果它在他们的文档中，还有另一种方法。 jsfiddle.net/rawaaavt/4

标签： javascript jquery html css datatables

【解决方案1】：

您可以使用tables() API 方法，如下所示：

$('#top_search').on( 'keyup', function () {
   table.tables().search( this.value ).draw();
});

table.tables().buttons().container()
   .appendTo( '.button-holder' );

有关代码和演示，请参阅updated jsFiddle。

【讨论】：