настраиваемый фильтр не может искать

Question

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

HTML

  <ul>
                    <li class="btn"><a href="#" data-type="all">All</a></li>
                    <li class="btn"><a href="#" data-type="video">Video</a></li>
                    <li class="btn"><a href="#" data-type="image">Image</a></li>
                    <li class="btn"><a href="#" data-type="upload">Upload Dash</a></li>
                    <li class="btn"><a href="#" data-type="link">Code Link</a></li>
                  </ul>

JQuery

 var table = $('#rlist').dataTable( {
        "processing": true,
        "serverSide": true,
        "order": [[ 0, "asc" ]],
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'T <'clearfix'>f>r>t<'row'<'col-sm-5'i><'col-sm-7'p>>",
        "sPaginationType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "ajax": baseurl+"media/ajax_fetch"       

    });

    $('ul').on('click', 'a', function() {

          table
            .columns(1)
            .search($(this).text())
            .draw();
        });

        $('ul').on('click', 'a.all', function() {

          table
            .search('')
            .columns(1)
            .search('')
            .draw();
        });

Проблема в том, что я не хочу использовать API поиска, я хочу отправить атрибут кнопки data-typeна стороне сервера, где я могу манипулировать вручную, не мешая функции поиска.

Как мне это сделать?

Answer 1

Я использую аналогичную функциональность с моим текущим проектом.По сути, вам нужно изменить события щелчка, чтобы получить атрибут data-type элемента, вызвать ajax с этими данными, затем очистить таблицу и добавить новые найденные данные.

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

$('ul').on('click', 'a', function() {
  var elementType = $(this).attr("data-type");
  $.ajax({
    type: "POST",
    //assuming server url is something like '/someURL/{elementType}'
    url: urlToServer + elementType, 
    success: function(response) {
      if (response) {
        table.clear().rows.add(response).draw();
      }
      //no data back from server
      else table.clear();
    }
  });
});