Showing more than one DataTable on same page (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. Here is the code of my HTML template with the tables
<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)
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 )
<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.
1 answers
solution1
0 2020-02-07 18:03:15
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. I've tried it, it's the same. Maybe you can use this concept. The datatables were rendered serverside.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.