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

Question

I am developing a Flask application, I have an HTML template in which I have two tables, for which I want to use the datatable plugin.我正在开发一个 Flask 应用程序，我有一个 HTML 模板，其中有两个表，我想使用数据表插件。 Here is the code of my HTML template with the tables这是我的 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 and searchcars are SQLAlchemy queries to a database, in my Flask python script) （searchshops 和 searchcars 是对数据库的 SQLAlchemy 查询，在我的 Flask python 脚本中）

The datatable attributes (search bar, sort columns), show on the first table but not the second one.数据表属性（搜索栏、排序列）显示在第一个表上，但不显示在第二个表上。

I have also tried the following script, (having added class="display" after both tables, based on this examplehttps://datatables.net/examples/basic_init/multiple_tables.html )我还尝试了以下脚本，（基于此示例https://datatables.net/examples/basic_init/multiple_tables.html在两个表之后添加了 class="display" ）

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

But I have the same problem.但我有同样的问题。

How can I apply the datatable plugin to both tables?如何将数据表插件应用于两个表？ Thank you.谢谢你。

Answer 1

I think it's a bug that it only applies to the first table and not on the succeeding table/s regardless if the first table is initialized or not with DataTable.我认为这是一个错误，它只适用于第一个表，而不适用于后续的表，无论第一个表是否使用 DataTable 初始化。 I've tried it, it's the same.我试过了，是一样的。 Maybe you can use this concept.也许你可以使用这个概念。 The datatables were rendered serverside.数据表在服务器端呈现。

multitable serverside rendering多表服务器端渲染

在同一页面上显示多个数据表 (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