datatable-同一页上有多个表，但是只有一个在响应 [英] datatable - multiple tables on same page, but only one is responding

问题描述

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

I have three datatables on my page:

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

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

This is the JS that I use to initialise my tables:

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();
});

但是，使用上面的方法，我只能得到搜索输入以处理表＃3。 按钮

However, using above, I am only able to get the search input to work on table #3. same goes for the buttons

这是一个显示问题的jsFiddle 。

Here is a jsFiddle that is showing the issue.

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

As you can see, only the bottom table is searchable, and only the bottom tables buttons is being placed in .button-holder.

什么我做错了吗？

推荐答案

您可以使用 tables（） API方法，如下所示：

You can use tables() API method as shown below:

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

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

请参见更新了jsFiddle 以进行代码和演示。

See updated jsFiddle for code and demonstration.

这篇关于datatable-同一页上有多个表，但是只有一个在响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！