在同一页面上显示多个 DataTable (jQuery)答案

【问题标题】：Showing more than one DataTable on same page (jQuery)在同一页面上显示多个 DataTable (jQuery)
【发布时间】：2020-02-06 16:33:11
【问题描述】：

我正在开发一个 Flask 应用程序，我有一个 HTML 模板，其中有两个表，我想为此使用数据表插件。这是我的带有表格的 HTML 模板的代码

<doctype html>

<html>
<head>
    <title> car_name </title>
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='aesthetic.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

</head>

<body>
<script>
$(document).ready( function () {
    $('#table_1').DataTable();
    $('#table_2').DataTable();
} );
</script>

<div class="spacebox"></div>

<div class="boxheader">

<a id="Shops">Shops</a>

</div>

<div id="bigbox">

<table id="table_1" border="1" style="background: white">
<thead>
<tr>
<th><b>Phosphosite ID</b></th>
<th><b>Protein</b></th>
<th ><b>Gene</b></th>
<th><b>Residue</b></th>
</tr>
</thead>

<tbody>
    {% for x in searchshops %}
<tr>
<td> {{x.NAME}} </td>
<td> {{x.RESOURCES}} </td>
<td> {{x.CARS}} </td>
<td> {{x.BRANDS}}</td>
</tr>
    {% endfor %}

</tbody>

</table>
</div>


<div class="spacebox"></div>

<div class="boxheader">

<a id="Cars">Cars</a>

</div>


<div class="bigbox">

<table id="table_2" border="1" style="background: white">


<tr>
<th><b>Name</b></th>
<th ><b>Shop</b></th>
</tr>

{% for x in searchcars %}
<tr>
<td> {{x.CAR}}</td>
<td> {{x.Shop}} </td>
</tr>
    {% endfor %}


</table>

</div>
</body>

</html>

（在我的 Flask python 脚本中，searchshops 和 searchcars 是对数据库的 SQLAlchemy 查询）

数据表属性（搜索栏、排序列）显示在第一个表上，但不显示在第二个表上。

我也尝试了以下脚本，（基于此示例https://datatables.net/examples/basic_init/multiple_tables.html，在两个表后添加了 class="display"）

<script>
$(document).ready(function() {
    $('table.display').DataTable();
} );
</script>

但我也有同样的问题。

如何将数据表插件应用于两个表？谢谢。

【问题讨论】：

首先，你不能有 2 个 id 相同的 div。你有“spacebox”、“boxheader”、“bigbox”重复。 ID 必须是唯一的并且只能使用一次
这不是我有问题的代码部分
尝试在第二个表中添加 thodu 和线程

标签： javascript jquery html flask datatables

【解决方案1】：

我认为这是一个错误，它仅适用于第一个表而不适用于后续表，无论第一个表是否已使用 DataTable 初始化。我试过了，是一样的。也许你可以使用这个概念。数据表在服务器端呈现。

multitable serverside rendering

【讨论】：