Ajax таблица обновление

Добавить ajax загрузку с обновлением по времени каждую 1 минуту таблицы С добавлением загрузки c прелодером от datatable и возможность загрузкой дальше еще по кнопке <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; } }); }

Ты уже почти все сделал — у тебя есть:

Таблица DataTables;
Автообновление через setInterval;
Кнопка "Загрузить ещё";
Прелоадер от DataTables (processing: true, table.processing(true));

Ниже я приведу полный рабочий фрагмент с небольшими исправлениями и недостающими элементами:

✅ Что будет:

Каждую 1 минуту (или 48 сек как у тебя) будет идти AJAX обновление;
При обновлении — включается стандартный прелоадер DataTables;
Кнопка Загрузить ещё — догружает следующие записи;
Все новые данные добавляются в таблицу (rows.add()).

✅ HTML (добавь кнопку)

html
<!-- Под таблицей добавь кнопку -->
<button id="loadMoreBtn" class="btn btn-primary mt-3">Загрузить ещё</button>
<input type="hidden" id="lastIDtd" value="0"> <!-- для хранения последнего ID -->

✅ JavaScript: Обновлённый рабочий код

html
<script>
let offset = 0;
const limit = parseInt(localStorage.getItem("table1_length") || 10);
let loading = false;

function getUrlParameter(name) {
  const params = new URLSearchParams(window.location.search);
  return params.get(name);
}

// Создание DataTable
const table1 = $('#table1').DataTable({
  data: [],
  columns: [
    { data: 'text_notifies' }, // заменено на актуальные названия
    { data: 'status' },
    { data: 'notifies_create' },
    { data: 'action' }
  ],
  pageLength: limit,
  responsive: true,
  scrollCollapse: true,
  scrollY: '680px',
  order: [[2, 'desc']],
  columnDefs: [
    { targets: 3, searchable: false, orderable: false, visible: true }
  ],
  processing: true,
  language: { url: "/ru/datatable/Russian.json" }
});

// Автозагрузка новых данных каждые 60 сек
setInterval(dataTaNow, 60000); // 60000 = 60 секунд

function dataTaNow() {
  table1.processing(true); // Показываем прелоадер

  $.post('ajax/post.php', { table_row: $('#lastIDtd').val() }, function (data) {
    if (data && data[0] && data[0].length > 0) {
      table1.rows.add(data[0]).draw(false); // Добавляем новые строки
      $('#lastIDtd').val(data.lastIDtd); // Обновляем последний ID
    }
  }, 'json')
  .always(() => table1.processing(false)); // Скрываем прелоадер
}

// Кнопка "Загрузить ещё"
$('#loadMoreBtn').on('click', function () {
  if (loading) return;
  loading = true;
  $('#loadMoreBtn').prop('disabled', true).text('Загрузка...');
  table1.processing(true);

  $.ajax({
    url: '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) {
      if (response.data && response.data.length > 0) {
        table1.rows.add(response.data).draw(false);
        offset += limit;
        $('#loadMoreBtn').prop('disabled', false).text('Загрузить ещё');
      } else {
        $('#loadMoreBtn').hide();
      }
    },
    error: function () {
      alert("Ошибка при загрузке данных");
    },
    complete: function () {
      loading = false;
      table1.processing(false);
    }
  });
});
</script>

✅ Пример JSON, который должен возвращать `ajax/post.php` или `inbox_data.php`

json
{
  "data": [
    {
      "text_notifies": "Новое уведомление",
      "status": "<span class='badge bg-info'>В работе</span>",
      "notifies_create": "2024-10-12 15:45",
      "action": "<button class='btn btn-success'>Принято</button>"
    }
  ],
  "hasMore": true,
  "lastIDtd": 1234
}

🛠 Не забудь:

ID строк можно хранить в #lastIDtd — чтобы не грузить одинаковые записи.
Убедись, что ajax/post.php и ajax/inbox_data.php возвращают application/json и в нужном формате.

Если нужно, могу помочь с примером PHP, который отдаёт данные.

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

Вы сказали:

ChatGPT сказал:

✅ Что будет:

✅ HTML (добавь кнопку)

✅ JavaScript: Обновлённый рабочий код

✅ Пример JSON, который должен возвращать ajax/post.php или inbox_data.php

🛠 Не забудь:

✅ Пример JSON, который должен возвращать `ajax/post.php` или `inbox_data.php`