数据表 - 同一个页面上的多个表，但只有一个是响应

我有我的网页三个数据表：数据表 - 同一个页面上的多个表，但只有一个是响应

<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中。

我在做什么错？

来源

2016-12-22 oliverbj

首先，不要为多个'DOM'元素使用相同的'id' – philantrovert

啊，好点。不知道为什么我在表中有id = drivingtable，因为我没有使用它。我将删除它。 – oliverbj

另外，我不认为你应该像这样初始化3个不同的数据表。我会把'drivingtable1，drivingtable2，drivingtable3'做成id，然后用3个不同的对象'table1，2和3'分别初始化它们中的3个。但那只是我。也许有一个更简单的方法。 – philantrovert

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

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

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

代码和演示见updated jsFiddle。

来源

2016-12-22 15:44:03

数据表 - 同一个页面上的多个表，但只有一个是响应

回答

相关问题