jQuery-dataTables - Klar, die Suche auf eine Spalte

Blick auf dieses Beispiel, http://www.datatables.net/examples/api/multi_filter_select.html, welche Spalten verwendet.search() aus der Datentabelle API, wie würden Sie 'clear' die Suche aus und zeigt alle Ergebnisse wieder, wenn der Benutzer wählt 'Alle' oder die leere erste option?

InformationsquelleAutor greenafrican | 2014-06-27
  1. 5

    Klären Sie die Suche mit einem leeren string als Suchbegriff ein, ohne regulären Ausdruck übereinstimmen. Die einzelnen Spalten filtern demo ist irgendwie ein bisschen irreführend, da das erste (Unbenannte) option nicht "alle" oder "jeder", so könnte man glauben, aber in der Tat sollten die Bezeichnung "leer" oder "null". Wenn Sie die erste option wählen, wird eine Suche nach regulären Ausdrücken für die leere Zeichenfolge durchgeführt. Ich denke, die demo ist in Eile getroffen.

    Modifizierte demo, wo die Auswahl der ersten option "löschen" in die Suche ein, die die Wahl alle : 

    $("#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>' )
  });
});

    modifiziert einzelnen Spalte filtern demo -> http://jsfiddle.net/CmMfJ/

    InformationsquelleAutor davidkonrad
  2. 1

    Nicht sicher, ob dies helfen würde, in diesem Beispiel, aber eine Möglichkeit fand ich für das clearing der einzelnen Spalte suchen Textfeldern ist etwa so:

    Erste dieses ist, wie erstelle ich die Felder:

    $(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();
        } );
    } );
}

    Ich, wie ich Ihnen klar:

    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..
}

    Beachten Sie die ähnlichkeiten zwischen dem block "//Apply the search" und die Funktion fnResetAllFilters().

    InformationsquelleAutor Logic1
  3. 0

    Ich dachte mir, ein sehr einfacher Weg, es zu tun.

    1. Löschen Sie alle text-Eingaben
    2. Trigger ein change-Ereignis für alle text Eingaben

    Seit DataTables verwendet change-Ereignis, um eine Filterung durchzuführen, Sie müssen nur lösen Sie eine für es zu für das Neuzeichnen der Tabelle.

    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");
    }

    Dies sollte auch für bestimmte filter die Eingabe von text. Sie müssen nur wählen Sie es richtig mit jquery!

    Hoffe, es wird helfen!

    InformationsquelleAutor trox
  4. 0

    Gibt es einen einfachen Weg, gegeben durch den Autor.

    Rufen Sie einfach in Ihrem klaren Veranstaltung:

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

    Als Datentabellen verwenden Sie die Ereignisse, die zum senden von Befehlen an den server, es werden auch klar die Suche!

    InformationsquelleAutor Daniel Soares
Schreibe einen Kommentar