Прокрутка в datatable

Есть дата datatable Как при открытие новой странице или загрузке новой страницы в datatable поднять таблицу и страницу наверх в начало страницы ? 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('Загрузить ещё'); } // после загрузки — прокрутка к таблице const table1_wrapper = document.querySelector('#table1_wrapper'); if (table1_wrapper) { table1_wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' }); }

Ты уже почти всё сделал правильно — у тебя есть вызов scrollIntoView, который прокручивает страницу к началу таблицы после загрузки новых данных. Но если цель — при каждой подгрузке новой страницы данных или при переключении страницы datatable поднять скролл вверх, тогда нужно учитывать:

📌 1. Прокрутка при клике на пагинацию DataTable

Если используется постраничная навигация (paging: true), то событие переключения страниц можно отловить так:

js
$('#table1').on('page.dt', function () {
    const table1_wrapper = document.querySelector('#table1_wrapper');
    if (table1_wrapper) {
        table1_wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
});

Это событие срабатывает при переключении страницы в стандартной пагинации DataTables.

📌 2. Прокрутка при "Загрузить ещё" (Load More Button)

Ты уже реализовал это правильно:

js
const table1_wrapper = document.querySelector('#table1_wrapper');
if (table1_wrapper) {
    table1_wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

Но учти: если ты используешь "бесконечную подгрузку" (load more) вместо стандартной пагинации, то это будет единственное место, где нужно делать прокрутку.

📌 3. Если хочешь, чтобы именно `window.scrollTo()` прокручивал всю страницу вверх:

Если #table1_wrapper слишком близко к началу страницы, то scrollIntoView может не сработать заметно. В таком случае можно использовать:

js
window.scrollTo({ top: 0, behavior: 'smooth' });

Или если нужно прокрутить до таблицы:

js
const tableTop = document.querySelector('#table1_wrapper').offsetTop;
window.scrollTo({ top: tableTop, behavior: 'smooth' });

✅ Итого

Для пагинации DataTable добавь обработчик page.dt.
Для "Загрузить ещё" ты уже правильно вызываешь scrollIntoView.
Если хочешь прокручивать в начало страницы, используй window.scrollTo({ top: 0 }).

Хочешь, я помогу объединить всё в один рабочий фрагмент кода?

Не работает прокрутка самой таблицы внутри dataTables_scrollBody { position: relative; overflow: auto; max-height: 880px; width: 100%;}

Понял! Ты используешь DataTables с прокруткой внутри контейнера, а именно:

css
.dataTables_scrollBody {
    position: relative;
    overflow: auto;
    max-height: 880px;
    width: 100%;
}

Значит, таблица находится внутри прокручиваемого блока, и при этом обычный window.scrollTo() или scrollIntoView() работает не на тот контейнер. Поэтому прокрутка "вверх" должна быть направлена на .dataTables_scrollBody, а не на window или body.

✅ Решение: Прокрутка именно `.dataTables_scrollBody` вверх

Нужно программно прокручивать внутренний контейнер DataTables, вот так:

js
$('#table1').on('page.dt', function () {
    const scrollBody = document.querySelector('.dataTables_scrollBody');
    if (scrollBody) {
        scrollBody.scrollTo({ top: 0, behavior: 'smooth' });
    }
});

И если ты используешь кнопку "Загрузить ещё", добавь то же:

js
const scrollBody = document.querySelector('.dataTables_scrollBody');
if (scrollBody) {
    scrollBody.scrollTo({ top: 0, behavior: 'smooth' });
}

👀 Пример с "Загрузить ещё" и пагинацией

js
// DataTable и добавление данных
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('Загрузить ещё');
}

// Прокрутка прокручиваемого блока таблицы вверх
const scrollBody = document.querySelector('.dataTables_scrollBody');
if (scrollBody) {
    scrollBody.scrollTo({ top: 0, behavior: 'smooth' });
}

// Прокрутка при переключении страницы
$('#table1').on('page.dt', function () {
    const scrollBody = document.querySelector('.dataTables_scrollBody');
    if (scrollBody) {
        scrollBody.scrollTo({ top: 0, behavior: 'smooth' });
    }
});

Если .dataTables_scrollBody у тебя как-то иначе называется (например, кастомизирован через scrollY), проверь через DevTools точный класс или структуру.

Нужно еще помочь с определением контейнера? Можешь скинуть структуру HTML, если хочешь.

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

Вы сказали:

ChatGPT сказал: