AJAX загрузка таблицы

Добавить ajax загрузку с обновлением по времени каждую 1 минуту таблицы С добавлением загрузки c прелодером и возможность загрузкой дальше еще по кнопке <table class="table dataTable no-footer" id="table1" aria-describedby="table1_info">  <thead> <tr>  <th class="sorting" tabindex="0" aria-controls="table1" rowspan="1" colspan="1" aria-label="Name: " style="width: 143.462px;">Уведомление</th> <th class="sorting" tabindex="0" aria-controls="table1" rowspan="1" colspan="1" aria-label="Email: " style="width: 31.781px;"> </th> <th class="sorting" tabindex="0" aria-controls="table1" rowspan="1" colspan="1" aria-label="Date: " style="width: 20.396px;">Дата</th>  <th class="sorting" tabindex="0" aria-controls="table1" rowspan="1" colspan="1" aria-label="Button: " style="width: 43.104px;"> </th></tr> </thead> <tbody> <? /*[valueTable] => Array ( [id] => 237 [uid] => 26 [inbox_udate] => 1726750273 [inbox_from] => one@mail.com [subject] => Attach [status_kp] => 0 [date_create] => 2024-09-19 15:51:19 [date_update] => )*/ $notifi = ''; foreach ($notifies_now as $key => $valueTable) { /*$name_org_info = ''; if($name_org = $SQLite3->querySingle("SELECT name_org FROM organization WHERE email_org='{$valueTable['inbox_from']}' ") ) $name_org_info = '<br><span class="badge bg-secondary"> '.$name_org.' </span>';*/ $notifi .= '<tr class="odd"> <td class="sorting_1">'.$valueTable['text_notifies'].' '.$STATUS_NOTIFY[$valueTable['status_notify']][0].'</td>'; if($valueTable['looked_ok']==0) $st_ok=['bg-info','В работе']; else $st_ok=['bg-secondary','Прочитано']; $notifi .= '<td class="notify_read"><span class="badge '.$st_ok[0].'"> '.$st_ok[1].' </span></td>'; $notifi .= '<td>'.$valueTable['notifies_create'].'</td>'; if($valueTable['looked_ok']==0) $notifi .= '<td><button type="button" class="btn btn-outline-success totiid" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable1" data-totiid="'.$valueTable['id'].'" data-stkp="'.$stkp_n.'"> принято </button>'; else $notifi .= '<td> '; $notifi.=' </td> </tr>'; } echo $notifi; ?> <script> function fmt(date) { return date.format("YYYY-MM-DD HH:mm"); } const savedLength = localStorage.getItem("table1_length") || 10; let offset = 0; const limit = parseInt(savedLength);//50; let loading = false; function getUrlParameter(name) { var params = new URLSearchParams(window.location.search); return params.get(name); } // Periodic table refresh var dataTablNow = setInterval('dataTaNow()', 48000); function dataTaNow(){ //$('#table1 button').attr('data-id'); //$('#lastIDtd').attr('data-id'); $.post( 'ajax/post.php', { table_row : $('#lastIDtd').val() }, function( data ) { console.log(data); var table1 = $('#table1').DataTable(); table1.rows.add(data[0]).draw(false); //table1.clear().rows.add(data.data).draw(false); //table1.draw(true); // Повторно применяем класс updatesclass после перерисовки таблицы $('#lastIDtd').val(data.lastIDtd); },'json'); } let table1 = $('#table1').DataTable({//var table /*ajax: { method: 'POST', url: window.location.href,//'ajax/inbox_data.php', data: function(d) { d.start = getUrlParameter('start') || ''; d.end = getUrlParameter('end') || ''; d.stkp = getUrlParameter('stkp') || 'all'; }, dataSrc: 'data' },*/ data: [], columns: [ { data: 'subject' }, { data: 'email' }, { data: 'date_create', render: function(data, type, row) { if (type === 'sort' || type === 'type') { // Преобразуем DD.MM.YYYY HH:mm:ss в YYYYMMDDHHmmss для сортировки let parts = data.split(/[\s.:]/); // разбиваем по пробелу, точке и двоеточию if (parts.length >= 6) { return parts[2] + parts[1] + parts[0] + parts[3] + parts[4] + parts[5]; // YYYYMMDDHHmmss } return data; } return data; // для отображения оставляем оригинал } }, { data: 'status' }, { data: 'action', searchable: false, orderable: false } ], 'pageLength': parseInt(savedLength),//parseInt(localStorage.getItem("table1_length") || 10), 'responsive': true, //"paging" : false, //"searching" : false, //"ordering" : true, scrollCollapse: true, scrollY: '680px', "order": [[2,'desc']], //"columnDefs": [{"type":"date","targets"}], //"columnDefs" : [{"targets":3, "type":"date-eu"}], "columnDefs": [ {"targets": 4, "searchable": false, "orderable": false, "visible": true} ], //"bInfo": true, processing: true, "language": {"url": "/ru/datatable/Russian.json" } // "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Russian.json"} }); function loadMoreData() { if (loading) return; loading = true; $('#loadMoreBtn').prop('disabled', true).text('Загрузка...'); table1.processing(true); // ⬅️ Показываем прелоадер DataTables $.ajax({ url: window.location.href,//'ajax/inbox_data.php', method: 'POST', dataType: 'json', data: { limit: limit, offset: offset, start: getUrlParameter('start') || '', end: getUrlParameter('end') || '', stkp: getUrlParameter('stkp') || 'all' }, success: function(response) { //const table = $('#table1').DataTable(); table1.rows.add(response.data).draw(false); offset += limit; if (!response.hasMore || response.data.length < limit) { $('#loadMoreBtn').hide(); } else { $('#loadMoreBtn').prop('disabled', false).text('Загрузить ещё'); } // после загрузки — прокрутка к таблице /*const table1_wrapper = document.querySelector('#table1_wrapper'); if (table1_wrapper) { table1_wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' }); }*/ const scrollBody = document.querySelector('.dataTables_scrollBody'); if (scrollBody) { scrollBody.scrollTo({ top: 0, behavior: 'smooth' }); } }, error: function() { alert("Ошибка при загрузке данных"); }, complete: function() { loading = false; } }); }

Чтобы реализовать AJAX-загрузку с обновлением таблицы каждые 1 минуту, показом прелоадера, а также постраничной загрузкой по кнопке "Загрузить ещё", можно внести следующие изменения и улучшения в ваш код.

✅ 1. Общая структура (что нужно):

⏱ Автоматическое обновление таблицы раз в минуту (setInterval)
🔁 Подгрузка новых данных с сервера (offset/limit или lastID)
🔘 Кнопка "Загрузить ещё" (pagination / infinite scroll)
⏳ Прелоадер при загрузке данных
✅ Обновление только новых данных, без дублирования

🔧 Правки и улучшения:

✅ A. HTML: Добавьте кнопку и прелоадер

html
<div class="text-center mt-3">
    <button id="loadMoreBtn" class="btn btn-primary">Загрузить ещё</button>
</div>
<div id="preloader" style="display: none; text-align:center; margin-top:10px;">
    <img src="/img/loader.gif" alt="Загрузка..." style="width:40px;">
</div>

✅ B. JavaScript: Автообновление и кнопка "Загрузить ещё"

js
let offset = 0;
const limit = parseInt(localStorage.getItem("table1_length")) || 10;
let loading = false;
let table1 = $('#table1').DataTable(); // Уже инициализирован

// Функция подгрузки данных
function loadData(autoUpdate = false) {
    if (loading) return;
    loading = true;

    $('#preloader').show();
    if (!autoUpdate) {
        $('#loadMoreBtn').prop('disabled', true).text('Загрузка...');
    }

    $.ajax({
        url: 'ajax/post.php',
        method: 'POST',
        dataType: 'json',
        data: {
            limit: limit,
            offset: offset,
            stkp: getUrlParameter('stkp') || 'all'
        },
        success: function(response) {
            if (response.data && response.data.length > 0) {
                table1.rows.add(response.data).draw(false);
                offset += response.data.length;
            }

            if (!response.hasMore || response.data.length < limit) {
                $('#loadMoreBtn').hide(); // больше нет данных
            } else {
                $('#loadMoreBtn').prop('disabled', false).text('Загрузить ещё');
            }
        },
        error: function() {
            alert("Ошибка загрузки данных");
        },
        complete: function() {
            loading = false;
            $('#preloader').hide();
        }
    });
}

// Автообновление каждые 60 секунд
setInterval(() => {
    loadData(true); // не отключает кнопку и не изменяет offset
}, 60000);

// Загрузка по кнопке
$('#loadMoreBtn').on('click', function() {
    loadData();
});

✅ C. PHP (ajax/post.php): Вернуть JSON

php
<?php
// Подключение к БД и логика выборки
$limit = (int) ($_POST['limit'] ?? 10);
$offset = (int) ($_POST['offset'] ?? 0);

// Пример выборки:
$query = "SELECT * FROM notifies ORDER BY notifies_create DESC LIMIT $limit OFFSET $offset";
$result = $db->query($query);

$data = [];
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    $data[] = [
        'subject' => $row['text_notifies'],
        'email' => ($row['looked_ok'] == 0) ? '<span class="badge bg-info">В работе</span>' : '<span class="badge bg-secondary">Прочитано</span>',
        'date_create' => $row['notifies_create'],
        'status' => '', // Если нужно
        'action' => ($row['looked_ok'] == 0)
            ? '<button type="button" class="btn btn-outline-success totiid" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable1" data-totiid="'.$row['id'].'">принято</button>'
            : ''
    ];
}

$hasMore = count($data) === $limit;

echo json_encode([
    'data' => $data,
    'hasMore' => $hasMore
]);

🧪 Пример результата

При загрузке:

Таблица подгружается по offset
Прелоадер активен во время AJAX
Новые строки добавляются в DataTable
Каждую минуту происходит автообновление
Кнопка "Загрузить ещё" появляется и исчезает по необходимости

✅ Дополнительно:

Убедитесь, что ajax/post.php возвращает данные в правильной JSON-структуре: { data: [], hasMore: true }
Не забудьте указать processData: true в $.ajax при необходимости
Если вы используете DataTables с серверной пагинацией — тогда serverSide: true и другая логика

Если хочешь, могу помочь упростить или адаптировать под конкретный фреймворк (Laravel, Yii и т.д.) или базу (MySQL, PostgreSQL, SQLite).

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал: