Динамическое обновление содержимого таблицы (DataTable php) с помощью JQuery Ajax GET с сохранением функциональных кнопок и полей таблицы
Вечер добрый, товарищи!
Небольшая предыстория к тому зачем мне это надо:
Для работы был создан сайт на который выводятся все заявки по ремонту и обслуживанию техники, дабы системные администраторы могли с удобством сортировать и распределять заявки между друг другом и рабочими площадками.
Сайт свою работу выполняет вполне сносно, но появилось желание видеть заявку сразу, как только она пришла, а не обновлять для этого страницу. Сайтодел из меня никакой, по этому я пошел искать решение этой проблемы на просторах интернета; Нашел JQuery, почитал документацию, сделал всё исходя из того что прочитал и...
Теоретически всё работает, но не совсем как надо. Дело в том, что у таблиц есть функциональные кнопки и поле поиска:
А так же, для удобства, вся таблица бьется на страницы по 10 элементов:
Теперь к сути проблемы, после того как я вывел таблицу в отдельный файл, и получил её с помощью JQuery GET, функциональные кнопки работают, но обновляются каждые 5 секунд (для теста взял 5 секунд, потом будет переделано на проверку новых строк в бд, и обновление при их наличии) вместе со всей таблицей, как итог если в элементе Column Visibility снять отображение ненужных столбцов, после обновления таблицы они сбросятся.
Это 1-ая проблема. 2-я проблема заключается в том, что перестаёт работать разделение таблицы на страницы, все данные просто выгружаются в одну таблицу, и внизу указывается только 1 страница, а так же некорректно отображается количество строк (элементов):
Должно быть так:
А выглядит так:
Я знаю что на StackOverflow лучше не задавать вопрос, если ты сам хотя бы не попробовал это сделать, и не можешь показать код своей попытки, по этому, вот кодовая база:
Код с основной страницы (куда мы получаем данные из таблицы):
<h2 class="font-weight-light text-center py-3 text-white">
Активные заявки
</h2>
<div class="" id="devtest">
</div>
<script type="text/javascript">
function datatable_wrapper() {
$.get( "/request/datatable_undone.php", function( data ) {
$( "#devtest" ).html( data );
var table1 = $('#example2').DataTable({
lengthChange: false,
order: [[ 0, "desc" ]],
buttons: ['excel', 'print', 'colvis'],
pageLength: 10
});
table1.buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');
});
}
datatable_wrapper();
setInterval(datatable_wrapper, 5000);
</script>
Код таблицы из которой мы получаем данные:
<?
function autoload($class) {
include "../classes/_class.".$class.".php";
}
spl_autoload_register('autoload');
# Класс конфига
$config = new config;
# Функции
$func = new func;
# База данных
$db = new db($config->HostDB, $config->UserDB, $config->PassDB, $config->BaseDB);
?>
<table id="example2" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-light">
<tr>
<th scope="col">Номер заявки</th>
<th scope="col">Площадка</th>
<th scope="col">ФИО</th>
<th scope="col">Кабинет</th>
<th scope="col">Номер телефона</th>
<th scope="col">E-Mail</th>
<th scope="col">Описание проблемы</th>
<th scope="col">Комментарий пользователя</th>
<th scope="col">Статус заявки</th>
<th scope="col">Комментарий администратора</th>
<th scope="col">Создана</th>
<th scope="col">Изменена</th>
<th scope="col">Системный администратор</th>
<th scope="col">Комментарий А.Урядова</th>
</tr>
</thead>
<tbody>
<?
$db->Query("SELECT * FROM requests WHERE `state` != 'Выполнена'");
if($db->NumRows() > 0){
while($data = $db->FetchArray()){
$checkbox_id++;
?>
<form method="POST">
<tr>
<th scope="row"><?=$data["id"]; ?></th>
<td><?=$data["place"]; ?></td>
<td><?=$data["name"]; ?></td>
<td><?=$data["cabinet"]; ?></td>
<td><?=$data["phone"]; ?></td>
<td><?=$data["email"]; ?></td>
<td><?=$data["trouble"]; ?></td>
<td><?=$data["comment"]; ?></td>
<td><?=$data["state"]; ?></td>
<td><?=$data["answer"]; ?></td>
<td><?=$data["req_date"]; ?></td>
<td><?=$data["upd_date"]; ?></td>
<td><?=$data["adm"]; ?></td>
<td><?=$data["u_comment"]; ?></td>
</tr>
</form>
</tbody>
<?php
}
}
?>
</table>
Постарался как можно понятнее и содержательнее объяснить свою проблему, буду крайне признателен каждому кто поможет мне исправить данные проблемы
Ответы (1 шт):
Вам нужно использовать DataTables ServerSide. Объявление таблицы:
table = $('#table').DataTable({
ajax: '/ajax.php',
processing: true,
serverSide: true,
lengthChange: true,
order: [[ 0, "desc" ]],
dom: "<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>rtp",
buttons: ['excel', 'print', 'colvis']
});
Чтобы правильно работали кнопки в случае с ServerSide получением данных - кнопки должны быть объявлены в dom элементе.
Пример выгрузки данных опубликован в официальном мануале DataTables - DataTables.net ServerSide Full Example
И по необходимости обновления данных в таблице использовать ajax.reload:
table.ajax.reload();
Так при получении данных будут функционировать кнопки и страница не будет перезагружаться, так как данные будут загружаться в фоновом режиме напрямую в таблицу.




