在同一页面上显示多个数据表 (jQuery)

Question

我正在开发一个 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>

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

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

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

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

但我有同样的问题。

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

Answer 1

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

多表服务器端渲染

在同一页面上显示多个数据表 (jQuery)

问题描述

1 个解决方案

解决方案1
0 2020-02-07 18:03:15

在同一页面上显示多个数据表 (jQuery)

问题描述

1 个解决方案

解决方案1 0 2020-02-07 18:03:15

解决方案1
0 2020-02-07 18:03:15