Удаление строки поиска и футера в jQuery DataTables

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

Для удаления строки поиска и информационной строки в DataTables в параметрах инициализации задайте searching: false и info: false. Для настройки размещения элементов используйте параметр dom: 'lrtip' — просто уберите из него символы 'f' и 'i', соответствующие элементам для фильтрации и информации.

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

Если вы используете версии DataTables ниже 1.10, вместо этого задайте bFilter: false и bInfo: false. Чтобы убрать элементы пагинации, используйте paging: false, с учётом используемой версии плагина, чтобы всё было аккуратно и чисто.

Расширенная настройка для опытных пользователей

Изящество в настройке макета DOM

Параметр dom позволяет самостоятельно определить расположение элементов пользовательского интерфейса DataTables. Вы можете изменить или упростить стандартный порядок lfrtip по своему усмотрению.

$('#example').DataTable({
  dom: 'lrtip' // Минимализм во всей красе
});

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

Подход "через CSS"

Вы можете использовать стили CSS для скрытия элементов:

.dataTables_filter, .dataTables_info {
  display: none; // И просто пропало
}

Мы регулируем сортировку, как профи

Если вам не нужна сортировка, просто отключите её, установив ordering: false:

$('#example').DataTable({
  ordering: false // Сортировка вас больше не потревожит
});

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

Представьте таблицу DataTable как стол для обеда:

Стол для обеда (🍽️): [Тарелка, Вилка, Нож, Строка Поиска🔍, Салфетка, Подвал👣]

Так же, как вы убираете ненужные вещи со стола, поступайте и с вашей DataTable:

Стол для обеда (🍽️): [Тарелка, Вилка, Нож, Салфетка]

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

$('#yourDataTable').DataTable({
   searching: false, // Прощай, строка поиска!
   "bInfo": false // И тебе до свидания, подвал!
});

Переход на новый уровень

Используйте мудрость сообщества

Не отказывайтесь от поддержки на форумах DataTables, где вы найдёте множество полезных советов от опытных пользователей со всего мира.

Документация — ваш верный союзник

Для детального изучения параметра sDom лучшего источника, чем официальная документация DataTables, не найти.

Примеры для лучшего понимания

Учиться на примерах всегда полезно. На сайте DataTables вы найдёте наглядные примеры реального использования и готовые решения.

Настраивайте под конкретную версию

Проверьте соответствие настроек плагина версии DataTables, которую вы используете, чтобы избежать возможных проблем с совместимостью.

Превращаем интерфейс пользователя в произведение искусства

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

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

1. Управление несколькими элементами таблицы — официальный пример от DataTables.
2. dom — руководство по использованию параметра dom.
3. Улучшение HTML-таблиц с помощью jQuery DataTables — статья с примерами.
4. Примеры DataTables – позиционирование DOM — подробное руководство по позиционированию DOM.
5. Полное руководство по тегу <table> — гайд по стилизации таблиц.
6. Документация jQuery API — глубокое погружение в jQuery.
7. Выбор элементов — мастер-класс по использованию селекторов jQuery.