поиск по данным с использованием jquery не работает

Question

У меня есть данные, заполненные именами и датами рождения, и два ввода (даты), я хочу найти людей, которые родились между этими двумя выбранными датами, поиск сделан очень хорошо, но в данных отображаются люди отделить, например, в моем примере, если я хочу, чтобы люди родились между датой 2020-02-11 и датой 2020-02-22, на 1-й странице ничего не отображается, а на странице 2 отображается siad 2020-02-11, месяц, который он хочет заполните первую страницу после 2-го.

index. php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class=" col-md-8 col-md-offset-2">
         <div class="form-group col-md-3">
          <label for="titre">start date</label>
         </div>
         <div class="form-group col-md-5">
           <input type="date" name="datep" id="from" class="form-control">
         </div>
       </div>

     <div class=" col-md-8 col-md-offset-2">
       <div class="form-group col-md-3">
        <label for="titre">end date</label>
       </div>
       <div class="form-group col-md-5">
         <input type="date" name="datep" id="to" class="form-control">
       </div>
     </div>
    </div>
    <table id="example" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>name</th>
          <th>date</th>
        </tr>
      </thead>
      <tbody id="b">
         <tr>
          <td>najib</td>
          <td>2020-02-01</td>
        </tr>
        <tr>
          <td>jack</td>
          <td>2020-02-02</td>
        </tr>
        <tr>
          <td>resou</td>
          <td>2020-02-03</td>
        </tr>
        <tr>
          <td>ali</td>
          <td>2020-02-04</td>
        </tr>
        <tr>
          <td>kamal</td>
          <td>2020-02-05</td>
        </tr>
        <tr>
          <td>med</td>
          <td>2020-02-06</td>
        </tr>
        <tr>
          <td>najat</td>
          <td>2020-02-07</td>
        </tr>
        <tr>
          <td>fouad</td>
          <td>2020-02-08</td>
        </tr>
        <tr>
          <td>hajar</td>
          <td>2020-02-09</td>
        </tr>
        <tr>
          <td>redouane</td>
          <td>2020-02-10</td>
        </tr>
        <tr>
          <td>siad</td>
          <td>2020-02-11</td>
          <td>16</td>
        </tr>
      </tbody>
      <tfoot>
           <tr>
            <th>name</th>
            <th>date birth</th>
           </tr>
      </tfoot>
</table>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>

jQuery

<script type="text/javascript">
    $(document).ready(function() {
    $('#example').DataTable();

    $("#from,#to").bind('keyup change', function() {
    var val1 = moment($('#from').val().toLowerCase(), 'YYYY/MM/DD');
    var val2 = moment($('#to').val().toLowerCase(), 'YYYY/MM/DD');
    $("#b").find('tr').filter(function() {
      $(this).toggle((moment($(this).find('td').text().toLowerCase(),
        'YYYY/MM/DD') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
        .toLowerCase(),
        'YYYY/MM/DD') <= (val2) || !val2["_isValid"]))

    });
  })
} );
   </script>

Answer 1

Проблема в том, что вы прячете / отображаете строки в своем коде. Вы должны делегировать чертеж таблицы самой таблице данных.

Чтобы разрешить фильтрацию по диапазону, вы можете определить пользовательскую функцию фильтрации, как описано в документах .

В вашем конкретном случае это должно работать:

var table = $('#example').DataTable();

var $from = $('#from');
var $to = $('#to');

// Define custom search function that will be executed every time the datable
// is redrawn.
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
    var min = moment($from.val().toLowerCase(), 'YYYY/MM/DD');
    var max = moment($to.val().toLowerCase(), 'YYYY/MM/DD');
    var date = moment(data[1].toLowerCase(), 'YYYY/MM/DD'); // use data of the date column. 

    if (!min.isValid() && !max.isValid()) {
        return true;
    }

    if ((!min.isValid() || date >= min) && (!max.isValid() || date <= max)) {
        return true;
    }

    return false;
});

// Redraw table each time one of the input changes.
$("#from,#to").on('keyup change', function() {
    table.draw();
});