Отображение нескольких таблиц данных на одной странице (jQuery) - PullRequest
0 голосов
/ 06 февраля 2020

Я занимаюсь разработкой приложения 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)

Атрибуты данных (строка поиска, столбцы сортировки) отображаются в первой таблице, но не во второй.

Я также пробовал следующий скрипт (добавив class = "display" после обеих таблиц, основываясь на этом пример https://datatables.net/examples/basic_init/multiple_tables.html)

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

Но у меня та же проблема.

Как применить подключаемый модуль с данными к обеим таблицам? Спасибо.

1 Ответ

0 голосов
/ 07 февраля 2020

Я думаю, что это ошибка, которая относится только к первой таблице, а не к последующим таблицам, независимо от того, инициализирована ли первая таблица или нет с помощью DataTable. Я пробовал, это то же самое. Может быть, вы можете использовать эту концепцию. Таблицы данных были отображены на сервере.

рендеринг нескольких серверов на стороне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...