Удаление или скрытие пагинации в DataTable jQuery

Быстрый ответ

Для того чтобы отключить пагинацию в DataTable, необходимо установить параметр paging в значении false при конфигурации:

$('#yourTableId').DataTable({
    paging: false
});

Так, все строки таблицы отобразятся на одной странице, а элементы управления пагинацией исчезнут.

Бонус: Дополнительные настройки и трюки

За границей пагинации: настройка элементов интерфейса DataTable

Для того чтобы изменить внешний вид и распределение элементов управления вокруг вашей таблицы, используйте свойство dom:

$('#yourTableId').DataTable({
    paging: false,
    searching: false,
    info: false,
    dom: 'lrtip'
});

Подробнее об этом расскажет наш спикер на видео

Более глубокие настройки: расширенные параметры инициализации

Конфигурация вашей таблицы может быть настроена с помощью комбинации различных параметров:

$('#yourTableId').DataTable({
    paging: false,
    autoWidth: false,
    destroy: true,
    processing: true,
    pagingType: 'numbers'
});

Визуализация

В условиях пагинации данные можно представить как поезд, состоящий из множества вагонов, идущих один за другим.

"Поезд" (🚇): [Данные 1, Данные 2, Данные 3, ..., Данные n]
"Станции" (🚏): [Остановка каждые 10 элементов данных]

Удалим станции:

🔧 Удаляем 🚏🚏🚏...

И получим непрерывный поток данных, без остановок:

🚇: [Данные 1, Данные 2, Данные 3, ..., Данные n]
# Без пагинации поток данных становится непрерывным

Работа с большим обьемом данных (или "Как пробежать марафон")

При параметре serverSide: true, работа с большими массивами данных станет такой же легкой, как воскресное утро:

• Улучшенная производительность для больших наборов данных.
• Основная работа выполняется сервером, а браузер спокойно отдыхает.
• Необходим серверный скрипт для обработки запросов и отправки данных в универсальном формате.

Стилистические приемы от Jedi: Настройка DataTable без пагинации

Вы можете скрыть пагинацию DataTable с помощью CSS:

.dataTables_wrapper .dataTables_paginate {
    display: none;  
}

В случае сомнений (или скептицизма)

Если параметры iDisplayStart или iDisplayLength сталкиваются с paging: false, DataTable просто их игнорирует, когда пагинация отключена.

Рассмотрение различных сценариев

Минимализм в действии

Если вам требуется базовая реализация без дополнительных настроек:

$('#yourTableId').DataTable({
     paging: false
});

С учетом эстетики

Настройка должна быть не только функциональной, но и эстетически приятной:

Примените CSS, чтобы добавить красоты и индивидуальности в ваши DataTables.

Повторное использование настроек

Оберните настройки в функцию, и вы получите удобный инструмент, пригодный для любой задачи.

Полезные материалы

1. paging — официальная документация DataTable для работы без пагинации.
2. DataTables – Reference — для тех, кто предпочитает старый API DataTable. Полезно для изучения вопроса удаления пагинации.
3. CSS-Tricks – Styling DataTables without Pagination — советы по созданию элегантного стиля для ваших таблиц DataTable.