Чтобы реализовать подгрузку данных по страницам (infinite scroll или pagination) вместо загрузки по датам — вам нужно внести изменения как в PHP (backend), так и в JavaScript (frontend).

🔧 Задача

Сейчас данные загружаются по дате (start, end), но вы хотите:

• оставить загрузку по дате при необходимости;

• добавить постраничную подгрузку (infinite scroll / "показать ещё").

✅ Что нужно сделать

1. На сервере (PHP) — реализовать пагинацию

Вместо:

sql
Копировать код
SELECT * FROM inbox_mail WHERE ... ORDER BY date_create DESC

Нужно добавить LIMIT и OFFSET, которые контролируют, сколько строк возвращается:

✅ Пример:

php
Копировать код
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 50;
$offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;

$sql = "SELECT * FROM inbox_mail WHERE status_kp NOT IN (1,11) AND $dateTableSQL 
        AND company_email_id IN ($access_company_email_id) 
        GROUP BY uid, inbox_udate, company_email_id 
        ORDER BY date_create DESC 
        LIMIT $limit OFFSET $offset";

💡 Оптимизация: добавьте LIMIT 50 OFFSET 0, потом LIMIT 50 OFFSET 50, и т.д.

2. На клиенте (JS) — подгружать при прокрутке или по кнопке

✅ Пример с кнопкой “Загрузить ещё”:

Добавьте кнопку:

html
Копировать код
<button id="loadMoreBtn" class="btn btn-secondary">Загрузить ещё</button>

JS-код:

js
Копировать код
let offset = 0;
const limit = 50; // Кол-во строк на подгрузку

function loadMoreData() {
  $.ajax({
    url: 'ajax/inbox_data.php',
    method: 'POST',
    data: {
      limit: limit,
      offset: offset,
      start: getUrlParameter('start') || '',
      end: getUrlParameter('end') || '',
      stkp: getUrlParameter('stkp') || 'all'
    },
    dataType: 'json',
    success: function (data) {
      const table = $('#table1').DataTable();
      table.rows.add(data.data).draw(false);
      offset += limit;

      // Если данных меньше чем limit — больше не загружаем
      if (data.data.length < limit) {
        $('#loadMoreBtn').hide();
      }
    }
  });
}

$('#loadMoreBtn').on('click', function () {
  loadMoreData();
});

// Загрузка первых данных
loadMoreData();

3. (Опционально) Автоподгрузка при прокрутке (infinite scroll)

Вместо кнопки — автозагрузка при достижении конца страницы:

js
Копировать код
$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
    loadMoreData(); // вызывает функцию выше
  }
});

4. На стороне PHP возвращать data и hasMore

Для удобства:

php
Копировать код
$response = [
    'data' => $data,
    'hasMore' => count($data) >= $limit
];
echo json_encode($response);

🧠 Что в итоге:

• По умолчанию — загружаются 50 записей;

• При нажатии “Загрузить ещё” или прокрутке — подгружаются следующие 50;

• При необходимости — можно по-прежнему фильтровать по start/end в URL;

• Всё работает на базе текущего SQL + AJAX.

❗ Важно

• Добавьте индексы в БД по date_create, status_kp, company_email_id — для производительности.

• Убедитесь, что GROUP BY не ломает LIMIT/OFFSET (SQLite может возвращать меньше строк, чем вы ждёте).

• Не забудьте защитить параметры limit и offset от SQL-инъекций, как выше ((int) кастинг).

Хочешь — могу сразу подготовить минимальные правки твоего кода (PHP и JS) под это.

Отлично, давай пошагово подготовим доработку твоего текущего кода с поддержкой постраничной подгрузки (infinite scroll или кнопка "Загрузить ещё").

🔧 Что мы делаем:

• PHP: добавим поддержку limit и offset в SQL-запрос;

• JS (frontend): добавим кнопку "Загрузить ещё" и JS-функцию для подгрузки новых данных;

• Оставим возможность фильтровать по дате (start, end), но сделаем это опциональным.

✅ 1. Изменения в PHP (inbox_data.php)

Найди в коде блок, где формируется SQL-запрос, примерно:

php
Копировать код
$stkp = "SELECT * FROM inbox_mail WHERE ...";

Заменим этот блок на:

php
Копировать код
// LIMIT & OFFSET для пагинации
$limit = isset($_POST['limit']) ? (int)$_POST['limit'] : 50;
$offset = isset($_POST['offset']) ? (int)$_POST['offset'] : 0;

// Основной SQL
if ($stkp_n != 'all') {
    $stkp_nsql = (int)$stkp_n;
    if($stkp_n==3 || $stkp_n==4)
        $stkp_nsql='3,4';

    $stkp = "SELECT * FROM inbox_mail 
        WHERE status_kp IN ($stkp_nsql) AND $dateTableSQL 
        AND company_email_id IN ($access_company_email_id) 
        GROUP BY uid,inbox_udate,company_email_id 
        ORDER BY date_create DESC 
        LIMIT $limit OFFSET $offset";
} else {
    $stkp = "SELECT * FROM inbox_mail 
        WHERE status_kp NOT IN (1,11) AND $dateTableSQL 
        AND company_email_id IN ($access_company_email_id) 
        GROUP BY uid,inbox_udate,company_email_id 
        ORDER BY date_create DESC 
        LIMIT $limit OFFSET $offset";
}

📌 Объяснение:

• LIMIT — сколько строк возвращать (например, 50);

• OFFSET — сколько строк пропустить (например, 0, 50, 100, и т.д. при подгрузке);

• Эти параметры будут приходить из JS с каждым новым запросом.

✅ 2. Изменения в JS — добавим кнопку и функцию подгрузки

Шаг 1: Добавь кнопку под таблицей

В HTML (например, под #table1) добавь:

html
Копировать код
<div class="text-center mt-3">
    <button id="loadMoreBtn" class="btn btn-secondary">Загрузить ещё</button>
</div>

Шаг 2: В JS добавь переменные и функцию подгрузки

Перед $(document).ready() или внутри него — добавь:

js
Копировать код
let offset = 0;
const limit = 50;
let loading = false; // блокировка во время загрузки

И функцию:

js
Копировать код
function loadMoreData() {
    if (loading) return;

    loading = true;
    $('#loadMoreBtn').prop('disabled', true).text('Загрузка...');

    $.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) {
            const table = $('#table1').DataTable();

            table.rows.add(response.data).draw(false);

            offset += limit;

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

Шаг 3: Инициализируй начальную загрузку + обработчик кнопки

Внутри $(document).ready(function() { ... }); добавь:

js
Копировать код
// Удаляем ajax из инициализации DataTables
var table1 = $('#table1').DataTable({
    data: [],
    columns: [ /* как и раньше */ ],
    // всё остальное как есть
});

// Начальная загрузка
loadMoreData();

// По кнопке — подгружаем
$('#loadMoreBtn').on('click', function () {
    loadMoreData();
});

📌 Важно:

• Мы отключили автоматическую загрузку через DataTables (ajax: { ... }) и заменили её на ручную подгрузку.

📋 3. (Необязательно) Автоподгрузка при прокрутке

Если хочешь infinite scroll, замени обработчик кнопки на:

js
Копировать код
$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreData();
    }
});

Но на старте лучше использовать кнопку — проще отлаживать.

✅ Финальный эффект:

• Загружаются первые 50 записей;

• При нажатии "Загрузить ещё" — подгружаются следующие 50 (и т.д.);

• Всё работает вместе с фильтрацией по дате (start, end) и статусу (stkp);

• Нет повторной загрузки тех же строк;

• Оптимизировано по памяти и скорости.

🎁 Бонус (оптимизация):

Можно возвращать hasMore: true/false из PHP и на основе этого скрывать кнопку:

php
Копировать код
$response = [
    'data' => $data,
    'hasMore' => count($data) >= $limit
];

И в JS:

js
Копировать код
if (!response.hasMore) {
    $('#loadMoreBtn').hide();
}

Хочешь — могу сгенерировать обновлённый рабочий JS и PHP-файл для вставки.

Чтобы я мог сгенерировать и отправить тебе обновлённый рабочий JS и PHP-файл прямо в Canvas, тебе нужно сначала войти в ChatGPT под своим аккаунтом. После этого функция станет доступной, и я смогу создать для тебя полноценный проект или файл.

Пока мы можем продолжить здесь — ниже я подготовлю сразу готовые обновлённые версии кода:

✅ Обновлённый PHP (inbox_data.php)

php
Копировать код
<?php
require_once '../db.php'; // подключи свою базу
session_start();

// Проверка даты
function validateDate($date, $format = 'Y-m-d') {
    $d = DateTime::createFromFormat($format, $date);
    return $d && $d->format($format) === $date;
}

// Получение лимита и оффсета
$limit = isset($_POST['limit']) ? (int)$_POST['limit'] : 50;
$offset = isset($_POST['offset']) ? (int)$_POST['offset'] : 0;

// Даты
$TBdate = date('Y-m-d');
$startDate = isset($_POST['start']) && validateDate($_POST['start']) ? $_POST['start'] : $TBdate;
$endDate = isset($_POST['end']) && validateDate($_POST['end']) ? $_POST['end'] : $TBdate;

$dateTableSQL = "DATE(date_create) BETWEEN '$startDate' AND '$endDate'";

// Доступы
$access_company_email_id = '';
foreach ($_SESSION['company_email_id'] as $key => $val) {
    if ($_SESSION['access_role'][$key] != 0) {
        $access_company_email_id .= $val . ',';
    }
}
$access_company_email_id = rtrim($access_company_email_id, ',');

// Статус фильтрация
$stkp_n = $_POST['stkp'] ?? 'all';

if ($stkp_n !== 'all') {
    $stkp_nsql = (int)$stkp_n;
    if ($stkp_n == 3 || $stkp_n == 4)
        $stkp_nsql = '3,4';

    $sql = "SELECT * FROM inbox_mail 
        WHERE status_kp IN ($stkp_nsql) AND $dateTableSQL 
        AND company_email_id IN ($access_company_email_id) 
        GROUP BY uid, inbox_udate, company_email_id 
        ORDER BY date_create DESC 
        LIMIT $limit OFFSET $offset";
} else {
    $sql = "SELECT * FROM inbox_mail 
        WHERE status_kp NOT IN (1,11) AND $dateTableSQL 
        AND company_email_id IN ($access_company_email_id) 
        GROUP BY uid, inbox_udate, company_email_id 
        ORDER BY date_create DESC 
        LIMIT $limit OFFSET $offset";
}

// Выполняем запрос
$Result = $SQLite3->query($sql);
$INBOX_ALL = [];
while ($row = $Result->fetchArray(SQLITE3_ASSOC)) {
    $INBOX_ALL[] = $row;
}

// Преобразуем для таблицы
$data = [];
foreach ($INBOX_ALL as $valueTable) {
    $subject = htmlspecialchars($valueTable['subject']);
    $email = htmlspecialchars($valueTable['inbox_from']);
    $dt = new DateTime($valueTable['date_create']);
    $formatted_date_create = $dt->format('d.m.Y H:i:s');

    $data[] = [
        'subject' => $subject,
        'email' => $email,
        'date_create' => $formatted_date_create,
        'status' => '<span class="badge bg-secondary">'.$valueTable['status_kp'].'</span>',
        'action' => '<button class="btn btn-sm btn-primary" data-id="'.$valueTable['id'].'">Открыть</button>'
    ];
}

// Ответ
echo json_encode([
    'data' => $data,
    'hasMore' => count($data) >= $limit
]);
exit;

✅ Обновлённый JS-файл

Вставь в <script> на странице:

js
Копировать код
let offset = 0;
const limit = 50;
let loading = false;

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

function loadMoreData() {
    if (loading) return;
    loading = true;

    $('#loadMoreBtn').prop('disabled', true).text('Загрузка...');

    $.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) {
            const table = $('#table1').DataTable();
            table.rows.add(response.data).draw(false);

            offset += limit;

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

$(document).ready(function () {
    // Инициализация таблицы
    $('#table1').DataTable({
        data: [],
        columns: [
            { data: 'subject' },
            { data: 'email' },
            { data: 'date_create' },
            { data: 'status' },
            { data: 'action', orderable: false, searchable: false }
        ],
        pageLength: 50,
        scrollY: '800px',
        scrollCollapse: true,
        order: [[2, 'desc']],
        language: { url: "/ru/datatable/Russian.json" }
    });

    // Первая загрузка
    loadMoreData();

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

✅ HTML-кнопка под таблицей:

html
Копировать код
<div class="text-center mt-3">
    <button id="loadMoreBtn" class="btn btn-secondary">Загрузить ещё</button>
</div>

Если тебе нужно — я могу также сделать вариант с автоподгрузкой при скролле или подготовить готовый архив (ZIP) с HTML+PHP+JS. Скажи — и я подготовлю.

Отличный вопрос! Давай разберёмся пошагово, чтобы ты понимал, как работает подгрузка данных по страницам в DataTables и как она связана с прокруткой (скроллингом).

📘 1. Пагинация (страницы) — стандартное поведение DataTables

Если ты используешь DataTables «из коробки», у тебя есть классическая пагинация:
👈 кнопки страниц под таблицей, например: 1 | 2 | 3 | ... | Next.

В этом случае:

• DataTables загружает всю таблицу сразу (весь массив data).

• Просто визуально скрывает строки, показывая 10 / 25 / 50 строк на странице.

• Скроллинг тут не влияет — таблица занимает ровно столько места, сколько строк на одной странице.

📘 2. Скроллинг — работает иначе

Если ты активируешь:

js
Копировать код
scrollY: '800px',
scrollCollapse: true,
paging: false,

Тогда:

• Пагинация отключается (paging: false);

• Таблица становится как бы «прокручиваемым блоком» внутри фиксированной высоты;

• Все строки, которые загружены в память, будут видимы через прокрутку;

• Изначально загружаются, например, первые 50;

• При скроллинге вниз можно отследить позицию и подгрузить ещё → это называется "инфинити скроллинг" / lazy load / infinite scroll.

⚠️ Проблема, о которой ты спросил:

❓ А если всего 10 записей? Скролла ведь не будет — значит, не подгрузится больше?

Да, если скролла нет (например, потому что записей мало) — скроллинг просто не активируется, и данные не подгружаются.

🔧 Возможные решения:

1. Использовать кнопку "Загрузить ещё", как я предложил — это надёжно, и работает даже если нет скролла.

2. Принудительно включить скроллинг, задав фиксированную высоту (как в примере):

   js
   Копировать код
   scrollY: '800px',
   scrollCollapse: true,
   paging: false,
   

   Это создаст скролл даже если мало строк, но таблица будет в ограниченном блоке.

3. Добавить автоматическую подгрузку при достижении низа скролла — пример ниже.

✅ Пример автоподгрузки при прокрутке (инфинити скролл)

Добавь этот код после инициализации DataTables:

js
Копировать код
$('#table1_wrapper .dataTables_scrollBody').on('scroll', function() {
    let scrollBody = $(this);
    if (scrollBody.scrollTop() + scrollBody.innerHeight() >= scrollBody[0].scrollHeight - 50) {
        // Почти внизу — загружаем ещё
        loadMoreData();
    }
});

🔸 Он отслеживает прокрутку блока таблицы и вызывает loadMoreData(), когда пользователь доскроллил вниз.

🧠 Какой подход выбрать?

💡 Совет

Для производительности на больших таблицах (>1000 строк) лучше использовать серверную подгрузку — ты уже это реализовал через limit + offset в PHP. Это 👍

Если хочешь, я могу подготовить 2 готовых шаблона:

• Один с кнопкой "Загрузить ещё",

• Второй с автопрокруткой.

Скажи — и я соберу для тебя оба варианта.

Хороший вопрос — и ты, похоже, наткнулся на одну из самых распространённых «неявных» проблем в SQL-запросах: порядок сортировки по умолчанию.

🔍 Проблема

Ты заметил, что:

📉 Сейчас письма в таблице выводятся от самой старой даты (первой),
⏳ хотя раньше начинались от последней (самой новой).

Это связано с тем, как у тебя работает SQL-запрос с ORDER BY, и как он взаимодействует с LIMIT и OFFSET.

📌 Причина — неправильное ORDER BY

В твоём запросе:

sql
Копировать код
ORDER BY date_create DESC

Что делает этот код:

• Сортирует по date_create от новой к старой (это правильно!);

• Однако если ты случайно поменял на ASC, или убрал ORDER BY вообще, то:

  • Записи будут выводиться от самой старой к новой (по умолчанию).

📌 Что проверить:

Открой участок запроса в PHP, например:

php
Копировать код
$sql = "SELECT * FROM inbox_mail 
    WHERE ...
    ORDER BY date_create DESC
    LIMIT $limit OFFSET $offset";

✅ Убедись, что там именно DESC, а не ASC.

🔁 Пример неправильного варианта:

Если у тебя вдруг стало так:

sql
Копировать код
ORDER BY date_create ASC

То:

• Первая страница будет содержать самые старые письма;

• А не последние, как ожидалось.

✅ Как правильно сделать: последние письма первыми

Убедись, что:

sql
Копировать код
ORDER BY date_create DESC
LIMIT $limit OFFSET $offset

Ты получаешь самые свежие записи первой порцией, а затем старые — по мере загрузки следующими.

🧠 Ещё момент: GROUP BY ломает порядок!

Если у тебя есть GROUP BY — как здесь:

sql
Копировать код
GROUP BY uid, inbox_udate, company_email_id
ORDER BY date_create DESC

🚨 В SQLite GROUP BY может "съесть" порядок, особенно если date_create не входит в GROUP BY.

✔ Рекомендация:

Убедись, что ORDER BY date_create DESC идёт после GROUP BY и работает по полю, которое реально есть в выводе. Если не помогает — лучше использовать MAX(date_create) в подзапросе или изменить структуру выборки.

✅ Что делать сейчас:

1. Проверь в PHP ORDER BY → должно быть DESC.

2. Проверь, не поменялся ли LIMIT и OFFSET (например, начальный OFFSET = 0).

3. Проверь, чтобы GROUP BY не мешал сортировке.

Если хочешь, могу посмотреть твой SQL-запрос в готовом виде (с echo $sql;) и сразу сказать, в чём там может быть подвох.

Готов помочь адаптировать это под скроллинг / пагинацию тоже — просто скажи.

Понял. У тебя не срабатывает обработчик scroll, несмотря на правильный (на первый взгляд) селектор.

Давай точно разберём, в чём проблема, почему scroll не срабатывает и как это гарантированно починить.

✅ Краткий диагноз

Ты повесил обработчик на элемент:

js
Копировать код
$('#table1_wrapper .dataTables_scrollBody')

Но в разметке его нет.
Ты пытаешься найти элемент с классом .dataTables_scrollBody, но ты его зачем-то добавил в table, а этот элемент создаёт сама библиотека DataTables, если ты активируешь:

js
Копировать код
scrollY: '800px'

⚠️ Проблема:

Ты добавил dataTables_scrollBody вручную в HTML:

html
Копировать код
<table class="table dataTable no-footer dataTables_scrollBody" id="table1">

📛 Это неправильно. Этот класс должен автоматически появляться внутри .dataTables_wrapper, но не у <table>!

💡 Почему это важно:

DataTables создаёт внутренние обёртки при scrollY:

html
Копировать код
<div class="dataTables_scroll">
  <div class="dataTables_scrollBody" style="overflow: auto;">
    <table>...</table>
  </div>
</div>

Ты же обращаешься к $('#table1_wrapper .dataTables_scrollBody'), но на деле этого элемента нет, если:

• Ты не включил scrollY,

• Или случайно сломал структуру,

• Или повесил класс вручную — что всё ломает.

✅ Решение: включить скроллинг через инициализацию

1. Убери класс dataTables_scrollBody из HTML:

diff
Копировать код
- <table class="table dataTable no-footer dataTables_scrollBody" id="table1">
+ <table class="table dataTable no-footer" id="table1">

2. Включи скроллинг правильно в JS:

js
Копировать код
var table1 = $('#table1').DataTable({
    scrollY: '600px', // или любая фиксированная высота
    scrollCollapse: true,
    paging: false, // обязательно отключи пагинацию
    ...
});

3. Повесь обработчик после инициализации таблицы:

js
Копировать код
setTimeout(() => {
  $('#table1_wrapper .dataTables_scrollBody').on('scroll', function() {
    let scrollBody = $(this);
    if (scrollBody.scrollTop() + scrollBody.innerHeight() >= scrollBody[0].scrollHeight - 50) {
        console.log('Скроллим вниз — загружаем ещё...');
        loadMoreData(); // твоя функция загрузки данных
    }
  });
}, 500); // можно обернуть в setTimeout или поставить после инициализации

💡 Почему setTimeout?
Потому что dataTables_scrollBody появляется не сразу, а только после инициализации таблицы. Иначе селектор сработает по undefined, и on('scroll') не привяжется.

✅ Дополнительно: отладка

Проверь в браузере:

1. В консоли выполни:

js
Копировать код
document.querySelector('.dataTables_scrollBody')

→ должен вернуть <div> с прокруткой, если scrollY работает.

2. Убедись, что при прокрутке console.log('...') вызывается.

3. Проверь, сколько записей отображается — если слишком мало, скролла может не быть вообще.

💡 Альтернатива

Если всё сложно, можно временно сделать кнопку:

html
Копировать код
<button id="loadMoreBtn">Загрузить ещё</button>

js
Копировать код
$('#loadMoreBtn').on('click', function () {
  loadMoreData();
});

📌 Итог

Если хочешь, могу собрать готовый JS-фрагмент под твою таблицу, просто скажи.

Вот обновлённые PHP и JS файлы с полноценной поддержкой автоматической подгрузки данных при прокрутке (infinite scroll) для твоей таблицы. Я также добавлю подробные комментарии, чтобы было понятно, как всё работает.

✅ PHP (ajax/inbox_data.php)

Этот файл теперь работает с параметрами limit и offset, чтобы возвращать порции данных:

php
Копировать код
<?php
require_once '../db.php'; // Подключи свою базу

function validateDate($date, $format = 'Y-m-d') {
    $d = DateTime::createFromFormat($format, $date);
    return $d && $d->format($format) === $date;
}

// Параметры пагинации
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
$offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;

// Параметры фильтра
$startDate = isset($_GET['start']) && validateDate($_GET['start']) ? $_GET['start'] : date('Y-m-d', strtotime('-6 days'));
$endDate = isset($_GET['end']) && validateDate($_GET['end']) ? $_GET['end'] : date('Y-m-d');

// Фильтр по статусу
$stkp_n = isset($_GET['stkp']) ? $_GET['stkp'] : 'all';
$access_company_email_id = '1,2,3'; // Пример: динамически из сессии

$dateTableSQL = "DATE(date_create) BETWEEN '$startDate' AND '$endDate'";

if ($stkp_n != 'all') {
    $stkp_nsql = (int)$stkp_n;
    $sql = "SELECT * FROM inbox_mail 
            WHERE status_kp IN ($stkp_nsql)
            AND $dateTableSQL 
            AND company_email_id IN ($access_company_email_id)
            ORDER BY date_create DESC
            LIMIT $limit OFFSET $offset";
} else {
    $sql = "SELECT * FROM inbox_mail 
            WHERE status_kp NOT IN (1,11)
            AND $dateTableSQL 
            AND company_email_id IN ($access_company_email_id)
            ORDER BY date_create DESC
            LIMIT $limit OFFSET $offset";
}

$result = $SQLite3->query($sql);

$data = [];

while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    $data[] = [
        'subject' => htmlspecialchars($row['subject']),
        'email' => htmlspecialchars($row['inbox_from']),
        'date_create' => (new DateTime($row['date_create']))->format('d.m.Y H:i:s'),
        'status' => '<span class="badge bg-secondary">Статус</span>',
        'action' => '<button class="btn btn-sm btn-primary">Открыть</button>'
    ];
}

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

✅ JS (включает автоматическую подгрузку)

html
Копировать код
<script>
$(document).ready(function () {
    let table1 = $('#table1').DataTable({
        columns: [
            { data: 'subject' },
            { data: 'email' },
            { data: 'date_create' },
            { data: 'status' },
            { data: 'action', searchable: false, orderable: false }
        ],
        data: [], // начально пусто
        scrollY: '600px',
        scrollCollapse: true,
        paging: false,
        order: [[2, 'desc']],
        language: {
            url: '/ru/datatable/Russian.json'
        }
    });

    let limit = 20;
    let offset = 0;
    let loading = false;
    let allLoaded = false;

    function loadMoreData() {
        if (loading || allLoaded) return;
        loading = true;

        $.ajax({
            url: 'ajax/inbox_data.php',
            method: 'GET',
            dataType: 'json',
            data: {
                start: getUrlParameter('start') || '',
                end: getUrlParameter('end') || '',
                stkp: getUrlParameter('stkp') || 'all',
                limit: limit,
                offset: offset
            },
            success: function (res) {
                if (res.data.length > 0) {
                    table1.rows.add(res.data).draw(false);
                    offset += limit;
                } else {
                    allLoaded = true;
                }
                loading = false;
            },
            error: function () {
                console.error('Ошибка загрузки данных');
                loading = false;
            }
        });
    }

    // Скролл на div с прокруткой таблицы
    setTimeout(() => {
        $('#table1_wrapper .dataTables_scrollBody').on('scroll', function () {
            let scrollContainer = $(this);
            if (scrollContainer.scrollTop() + scrollContainer.innerHeight() >= scrollContainer[0].scrollHeight - 50) {
                loadMoreData();
            }
        });
    }, 300);

    // Начальная загрузка
    loadMoreData();

    // Функция получения параметров из URL
    function getUrlParameter(name) {
        let params = new URLSearchParams(window.location.search);
        return params.get(name);
    }
});
</script>

✅ HTML

html
Копировать код
<table id="table1" class="table table-striped display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Тема</th>
            <th>От</th>
            <th>Дата</th>
            <th>Статус</th>
            <th>Действие</th>
        </tr>
    </thead>
</table>

🧠 Как это работает

• При загрузке: загружается первая партия (limit = 20).

• При прокрутке вниз scrollTop + innerHeight ≈ scrollHeight — вызывается loadMoreData().

• Таблица не использует встроенную пагинацию, она отключена.

• Таблица автоматически обновляется при получении новых данных.

• Серверный PHP возвращает только нужную часть данных (LIMIT/OFFSET).

🛠️ Подсказки

• Убедись, что scrollY в DataTable активирован.

• Не добавляй вручную классы dataTables_scrollBody, они генерируются автоматически.

• Обязательно убери paging: true — иначе scroll не работает.

Если хочешь, я могу собрать полный работающий HTML+PHP+DB-пример с JSON-записями.

Добавление прелоадера (индикатора загрузки) при подгрузке данных по скроллу — отличная идея, чтобы пользователь понимал, что идёт загрузка.

✅ Что сделаем:

1. Добавим HTML-разметку для прелоадера.

2. Покажем прелоадер перед загрузкой и скроем после.

3. Добавим немного стилей (чтобы красиво смотрелось).

🔧 Шаг 1: HTML прелоадера

Добавь куда-нибудь внизу под таблицей:

html
Копировать код
<div id="table-loader" style="display:none; text-align:center; padding:15px;">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Загрузка...</span>
    </div>
</div>

🟦 Это Bootstrap-прелоадер. Он крутится и выглядит приятно.

Если у тебя нет Bootstrap, можно сделать кастомный — покажу в конце.

🎯 Шаг 2: JS — показать/скрыть прелоадер

Вставь в loadMoreData() следующие строки:

js
Копировать код
function loadMoreData() {
    if (loading || allLoaded) return;
    loading = true;
    
    $('#table-loader').show(); // 🔹 Показать прелоадер

    $.ajax({
        url: 'ajax/inbox_data.php',
        method: 'GET',
        dataType: 'json',
        data: {
            start: getUrlParameter('start') || '',
            end: getUrlParameter('end') || '',
            stkp: getUrlParameter('stkp') || 'all',
            limit: limit,
            offset: offset
        },
        success: function (res) {
            if (res.data.length > 0) {
                table1.rows.add(res.data).draw(false);
                offset += limit;
            } else {
                allLoaded = true;
            }
            loading = false;
            $('#table-loader').hide(); // 🔹 Скрыть прелоадер
        },
        error: function () {
            console.error('Ошибка загрузки данных');
            loading = false;
            $('#table-loader').hide(); // 🔹 Скрыть даже при ошибке
        }
    });
}

🎨 Шаг 3 (необязательно): CSS для кастомного прелоадера

Если ты не используешь Bootstrap, вот простой вариант:

HTML:

html
Копировать код
<div id="table-loader" style="display:none; text-align:center; padding:15px;">
    <div class="custom-spinner"></div>
</div>

CSS:

html
Копировать код
<style>
.custom-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 1s linear infinite;
    display: inline-block;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

✅ Где размещать?

Размести <div id="table-loader">...</div>:

• Под таблицей, но внутри #table1_wrapper, чтобы он прокручивался вместе с таблицей.

• Или вне #table1_wrapper, если ты хочешь, чтобы прелоадер всегда был на экране.

Пример (под таблицей):

html
Копировать код
<div id="table1_wrapper">
  <!-- таблица DataTable тут -->
  <div id="table-loader">...</div>
</div>

🔚 Результат

Теперь при скролле вниз:

• Показывается крутящийся индикатор загрузки.

• После подгрузки — он исчезает.

• Всё работает плавно и понятно для пользователя.

Если хочешь добавить оверлейный прелоадер (на весь экран), тоже могу показать.