Jquery: входная таблица поиска не фильтруется

Question

У меня есть простая таблица, и внутри таблицы у меня есть некоторые данные для тестирования DataTable. Я установил false на bFilter , чтобы скрыть исходный поиск DataTable и сделать свой собственный.

Проблема в том, что мой собственный ввод текста не фильтрует данные в таблице. Ссылка на это , я уже создать, как это в Jquery.

Jquery

jQuery(document).ready(function ($) {
  var table = $("#data-table").DataTable({
    bSort: true,
    bFilter: false,
    iDisplayStart: 0,
    iDisplayLength: 20,
    sPaginationType: "full_numbers",
    sDom: "Rfrtlip",
  });
  $("#searchFilter").keyup(function () {
    table.search($(this).val()).draw();
  });
});

Но входной текст не будет фильтровать, я где-то пропустил ?

Таблица

 <input type=\"text\" id=\"searchFilter\" name=\"searchFilter\" placeholder=\"Search...\" style=\"width:200px;\"/>  
 <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"stdtable \" id=\"data-table\">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>JUDUL</th>
                        <th>TANGGAL</th>
                        <th>RINGKASAN</th>
                        <th>STATUS</th>
                        <th>KONTROL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>zazaza</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                    </tr>
                    <tr>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                        <td>asdsada</td>
                    </tr>
                    <tr>
                        <td>remoremoreo</td>
                        <td>remoremoreo</td>
                        <td>remoremoreo</td>
                        <td>remoremoreo</td>
                        <td>remoremoreo</td>
                        <td>remoremoreo</td>
                    </tr>
                </tbody>
            </table>

Answer 1

Ваш поиск не работает, потому что вы установили опцию bFilter: false. Вы найдете больше информации о bFilter здесь и о search () здесь .

Я могу показать вам рабочий пример здесь:

$(document).ready(function() {
  var table = $("#data-table").DataTable({
    bSort: true,
    // bFilter: false,
    iDisplayStart: 0,
    iDisplayLength: 20,
    sPaginationType: "full_numbers",
    sDom: "Rfrtlip",
  });

  $('#searchFilter').on('keyup', function() {
    table.search(this.value).draw();
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<input type="text" id="searchFilter" name="searchFilter" placeholder="Search..." style="width:200px;" />

<table cellpadding="0" cellspacing="0" border="0" class="stdtable" id="data-table">
  <thead>
    <tr>
      <th>NO</th>
      <th>JUDUL</th>
      <th>TANGGAL</th>
      <th>RINGKASAN</th>
      <th>STATUS</th>
      <th>KONTROL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>zazaza</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>remoremoreo</td>
      <td>remoremoreo</td>
      <td>remoremoreo</td>
      <td>remoremoreo</td>
      <td>remoremoreo</td>
      <td>remoremoreo</td>
    </tr>
  </tbody>
</table>