jQuery dataTables - Clair recherche sur une colonne

En regardant cet exemple, http://www.datatables.net/examples/api/multi_filter_select.html, qui utilise les colonnes.recherche (la) de la Table de données de l'API, comment pouvez-vous effacer la recherche et afficher tous les résultats à nouveau lorsque l'utilisateur sélectionne "Tous" ou le vide de la première option?

OriginalL'auteur greenafrican | 2014-06-27

  1. 5

    Vous désactivez la recherche en utilisant une chaîne vide comme terme de recherche, sans expression régulière. La colonne individuelle de filtrage de démonstration est en quelque sorte un peu trompeur, puisque la première (sans nom) option n'est pas "tous" ou "tout", comme on pourrait le croire, mais, en fait, devrait être nommé "vide" ou "null". Si vous sélectionnez la première option, une expression régulière pour la chaîne vide est effectuée. Je crois que la démonstration est faite dans la précipitation.

    Modifié démo où la sélection de l'option "clear" la recherche, c'est-sélection de tous : 

    $("#example tfoot th").each( function ( i ) {
  var select = $('<select><option value="">All</option></select>')
    .appendTo( $(this).empty() )
    .on( 'change', function () {
       var term =  $(this).val()!='' ? '^'+$(this).val()+'$' : '';
       table.column( i )
          .search(term, true, false )
          .draw();
       } );

  table.column( i ).data().unique().sort().each( function ( d, j ) {
    select.append( '<option value="'+d+'">'+d+'</option>' )
  });
});

    individuelles modifiées colonne de filtrage démo -> http://jsfiddle.net/CmMfJ/

    OriginalL'auteur davidkonrad

  2. 1

    Ne sais pas si ce serait aider dans cet exemple, mais d'une façon que j'ai trouvée pour la compensation de la colonne de recherche textfields est comme suit:

    Première c'est de cette façon que je créer les champs:

    $(document).ready(function(){  
    //Setup - add a text input to each footer cell
    $('#myTable tfoot th').each( function () {
        var title = $('#myTable thead th').eq( $(this).index() ).text();
        $(this).html( '<input id="'+title.replace(//g,'')+'_search" type="text" placeholder="'+title+'" />' );
    } );

    oTable = $('#myTable').DataTable({ settings bla bal });

    //Apply the search
    oTable.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', oTable.column( colIdx ).footer() ).on( 'keyup change', function () {

            oTable
                .column( colIdx )
                .search( this.value, true )
                .draw();
        } );
    } );
}

    Et ce dont j'clair:

    function fnResetAllFilters() {
    //Apply blank string
    oTable.columns().eq( 0 ).each( function ( colIdx ) {
            $( 'input', oTable.column( colIdx ).footer() ).val(''); //clear column visible text
            oTable.columns(colIdx).search( '', true ); //clear dataTable column search filters
        }
    )
    oTable.search( '', true ).draw(); //clears global search filter then finally draw the table, all done..
}

    Noter les similitudes entre le bloc "//Appliquer la recherche" et la fonction fnResetAllFilters().

    OriginalL'auteur Logic1

  3. 0

    J'ai pensé à un moyen très simple de le faire.

    1. Effacer tout le texte à partir du texte des entrées
    2. Déclencher un événement de changement de toutes les saisies de texte

    Depuis DataTables utilise événement de changement à effectuer le filtrage, il vous suffit de déclencher un rafraîchissement de la table.

    function clearAllInputs() {
      //Will reset all input text values to nothing.
      $("input:text").val('');
      //Will trigger a "change" event in order for datatables to refresh the filtering. This is because DataTables uses the change event to perform filtering.
      $("input:text").trigger("change");
    }

    Cela devrait également fonctionner pour filtre spécifique de saisie de texte. Vous avez juste à sélectionner correctement avec jquery!

    Espère que ça va aider!

    OriginalL'auteur trox

  4. 0

    Il existe un moyen simple, donné par l'auteur.

    Viens de l'appeler comme ceci dans votre cas:

    $('#datatable tfoot input').val('').change();

    Comme les tables de données utiliser les événements pour envoyer des commandes au serveur, il va également effacer la recherche!

    OriginalL'auteur Daniel Soares