Datatables clair filtres d'entrée

Je suis à l'aide de tables de données v1.10.11 et Jquery v 2.2.0

J'ai une table avec deux filtres de recherche;

<input type="text" id="myInputTextField1" class="form-control"> <!--search one-->

<input type="text" id="myInputTextField2" class="form-control"> <!--search two-->

Ma datatable JS;

$(document).ready(function() {
    $('#example').dataTable({});
}); 

$('#myInputTextField1').keyup(function(){
  table.search($(this).val()).draw() ;
})

$('#myInputTextField2').keyup(function(){
  table.search($(this).val()).draw() ;
})

La recherche fonctionne bien, pas de problèmes.

Comment pourrais-je intégrer un simple bouton qui lorsqu'il est cliqué, ce qui efface les deux champs de saisie et de réinitialiser la table à son état par défaut? Par exemple;

<button type="button" id="test">Clear Filters</button>

<table id="example">
<thead>
  <tr>
    <th>COLUMN 1</th>
    <th>COLUMN 2</th>
    <th>COLUMN 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>ROW 1</td>
    <td>ROW 1</td>
    <td>ROW 1</td>
  </tr>
  <tr>
    <td>ROW 2</td>
    <td>ROW 2</td>
    <td>ROW 2</td>
  </tr>
  <tr>
    <td>ROW 3</td>
    <td>ROW 3</td>
    <td>ROW 3</td>
  </tr>  
</tbody>
</table>

Toute aide est appréciée.

OriginalL'auteur jonboy | 2016-02-19

  1. 3

    À réinitialiser un filtre de recherche, il suffit d'appeler search() à nouveau avec une chaîne vide. De même, vous pouvez effacer la valeur d'une entrée en fixant sa valeur à une chaîne vide. Essayez ceci:

    $('#test').click(function() {
    $('#myInputTextField1, #myInputTextField2').val('');
    table.search('').draw(); //required after
});

    exemple

    C'est étrange comportement. Êtes-vous sûr que table est correctement défini et la portée? Voir le violon, j'ai ajouté un exemple de travail
    C'est seulement ne fonctionne pas comme vous ne l'avez pas inclus moment.js dans les références du violon: jsfiddle.net/ngw6gddk/2
    J'ai peur de pas - à l'œuvre première fois en coulisse au-dessus de
    Essayez de mettre le .draw() appel après avoir effacer les valeurs: jsfiddle.net/ngw6gddk/3

    OriginalL'auteur Rory McCrossan

  2. 0
    <button type="button" id="test" class="btn btn-primary">Clear Filters</button>

  $('#test').click(function () {
              $('input:text').val('');
              var datatableVariable = $('#tblBusinessDev').dataTable();
              datatableVariable.fnFilterClear();
              $('#tblBusinessDev tfoot input').val('').change();
          });


//filter code

jQuery.fn.dataTableExt.oApi.fnFilterClear = function (oSettings) {
              var i, iLen;

              /* Remove global filter */
              oSettings.oPreviousSearch.sSearch = "";

              /* Remove the text of the global filter in the input boxes */
              if (typeof oSettings.aanFeatures.f != 'undefined') {
                  var n = oSettings.aanFeatures.f;
                  for (i = 0, iLen = n.length ; i < iLen ; i++) {
                      $('input', n[i]).val('');
                  }
              }

              /* Remove the search text for the column filters - NOTE - if you have input boxes for these
               * filters, these will need to be reset
               */
              for (i = 0, iLen = oSettings.aoPreSearchCols.length ; i < iLen ; i++) {
                  oSettings.aoPreSearchCols[i].sSearch = "";
              }

              /* Redraw */
              oSettings.oApi._fnReDraw(oSettings);
          };

    OriginalL'auteur Abhijit Das