J'ai une datatable à remplir avec les noms et dates de naissance, et deux entrées (dates), je veux chercher des personnes qui sont nées entre ces deux dates choisies, la recherche se fait très bien, mais datatable affiche les personnes séparées, par exemple , dans mon exemple si je veux des personnes nées entre la date 2020-02-11 et la date 2020-02-22, en 1ère page ça n'affiche rien, et la page 2 affiche siad 2020-02-11, mois qu'il veut remplir dans la 1ère page après la 2ème.

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>
1
Sok Ma 22 févr. 2020 à 19:36

1 réponse

Meilleure réponse

Le problème est que vous masquez/affichez les lignes de votre code. Vous devez déléguer le dessin de la table à la table de données elle-même.

Afin de permettre le filtrage par plage, vous pouvez définir une fonction de filtrage personnalisée, comme expliqué dans la docs .

Dans votre cas particulier, cela devrait fonctionner:

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();
});
1
mgarcia 22 févr. 2020 à 19:01