在同一頁面上顯示多個數據表 (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