Как сделать фильтрацию столбцов в jquery datatables?

Пользователь

от stephania , в категории: JavaScript , год назад

Как сделать фильтрацию столбцов в jquery datatables?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от gussie.jones , год назад

@stephania 

Чтобы добавить фильтрацию столбцов в таблицу, используя jQuery DataTables, вам нужно выполнить следующие шаги:

  1. Добавьте инпуты для фильтрации на страницу, по одному для каждой столбца таблицы, например:
1
2
<input type="text" id="filter1" placeholder="Фильтр">
<input type="text" id="filter2" placeholder="Фильтр">


  1. Инициализируйте DataTables и настройте его для поддержки фильтрации столбцов, указав опцию searching: true:
1
2
3
$('#example').DataTable({
    searching: true
});


  1. Напишите код для применения фильтров. Вы можете использовать метод column().search() для установки значения фильтра для конкретной столбца:
1
2
3
4
5
6
7
$('#filter1').on('keyup', function () {
    table.column(0).search($(this).val()).draw();
});

$('#filter2').on('keyup', function () {
    table.column(1).search($(this).val()).draw();
});


Здесь table - это объект DataTables, который был создан на предыдущем шаге. В примере мы добавляем обработчики событий на изменение значений инпутов. При каждом изменении мы вызываем метод column().search(), чтобы установить новое значение фильтра для соответствующей столбцы, и вызываем метод draw() для перерисовки таблицы.

  1. После того, как вы добавили все фильтры, необходимые для таблицы, вам может потребоваться скрыть столбцы в зависимости от условий фильтрации. Для этого используйте метод column().visible():
1
table.column(2).visible(false);


В этом примере мы скрываем третью столбец таблицы, если фильтр не соответствует определенным условиям.


Вот пример кода, который объединяет все шаги:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    var table = $('#example').DataTable({
        searching: true
    });
 
    $('#filter1').on('keyup', function () {
        table.column(0).search($(this).val()).draw();
    });
 
    $('#filter2').on('keyup', function () {
        table.column(1).search($(this).val()).draw();
    });
 
    // Пример скрытия столбца
    if (some_condition) {
        table.column(2).visible(false);
    }
});


Здесь some_condition - это условие, которое определяет, должен ли быть скрыт третий столбец.

Пользователь

от marlen , 15 дней назад

@stephania 

Приведенный вами код хорошо объясняет процесс фильтрации столбцов в jQuery DataTables. Он позволит пользователям настроить фильтры для каждой колонки и реагировать на изменения значений фильтров.


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$('#example').on('search.dt', function() {
  var filters = $('.column-filter');
  if (!this.search.value) {
    filters.val('');
    table.columns().search('').draw();
  }
});

$('.column-filter').on('input', function() {
  var index = $(this).data('column');
  table.column(index).search($(this).val()).draw();
});


Для данного кода добавьте HTML-элементы инпутов соответственно:

1
2
3
4
5
<button type="reset" class="reset-filters">Сбросить поиск</button>

<input type="text" class="column-filter" data-column="0" placeholder="Фильтр">
<input type="text" class="column-filter" data-column="1" placeholder="Фильтр">
<input type="text" class="column-filter" data-column="2" placeholder="Фильтр">


Пример позволяет сбросить фильтры столбцов при сбросе общего поиска, а также добавляет класс .reset-filters кнопке, чтобы очистить все фильтры и перегрузить исходные данные.


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