Javascript datatable—同一页上有多个表，但只有一个表在响应

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

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

然而，使用上面的方法，我只能获得

搜索

输入来处理表#3。

按钮也是如此

显示问题的

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

按钮夹中

我做错了什么？
您可以使用API方法，如下所示：

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

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

有关代码和演示，请参阅。
首先，不要将同一个
id
用于多个
DOM
elementAh，这一点很好。不知道为什么我在表中有id=drivingtable，因为我没有使用它。我将删除它。另外，我认为您不应该像这样初始化3个不同的数据表。我将创建id
drivingtable1、drivingtable2、drivingtable3
，然后使用3个不同的对象分别初始化它们。但那只是我。也许有更简单的方法。@Philantrovt根据他们的官方文档，这是初始化多个表的方法：我更新了小提琴。我认为这是可行的，但话说回来，如果在他们的文档中，还有另一种方法。
$('#top_search').on( 'keyup', function () {
   table.tables().search( this.value ).draw();
});

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