Поиск данных по атрибуту td

Question

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

Вот как я добавляю атрибут через Datatable ():

createdRow: function( row, data, dataIndex ) {
  //Check if merchant has psp and add it to the cell
  if(data.parent_id) {
    $( row ).find('td:eq(0)').attr('data-search', 'merchant');
  } else {
    $( row ).find('td:eq(0)').attr('data-search', 'psp');
  }
}

Я хочу использовать раскрывающийся список для поиска по значению атрибута, я попытался сделать это следующим образом:

 $('#dropdown1').on('change', function() {
       if(this.value === ' ') {
          table
          .columns( 0 )
          .search( '' )
          .draw();
        } else {
          table
          .columns( 0 )
          .search( this.value )
          .draw();
        }

 })

Но, похоже, это не работает.

Пожалуйста, найдите скрипку здесь с фиктивными данными https://jsfiddle.net/designtocode/mdfeL7tp/14/

Любая помощь или помощь будут оценены.

Answer 1

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

Это будет поисковый плагин:

$.fn.dataTable.ext.search.push(function (settings, searchData, index, rowData, counter) {
  let shouldDisplay = true;
  let searchValue = $('#dropdown1').val();
  if (searchValue == 'merchant') {
    shouldDisplay = rowData.parent_id ? true : false;
  } else if (searchValue == 'psp') {
    shouldDisplay = rowData.parent_id ? false : true;
  }
  return shouldDisplay;
});

И ваш выпадающий список просто должен вызвать ничью на столе, если она изменится:

$('#dropdown1').on('change', function() {
  table.draw();
});