jQuery datatable behalten parameter „filter“ nach Aktualisierung

Arbeite ich mit einer datatable als pro einige meiner früheren Fragen. Ich war in der Lage, die INPUT-Felder an der Spitze der Tabelle führt einzelne Spalte, sucht in der datatable.

Was ich jetzt noch tun müssen, ist behalten der eingegebene Wert in das INPUT-Feld (oder Felder), nachdem die Seite aktualisiert wurde.

Hier ist mein code bisher:

 //header input filters
 $('#example1 .filters th').each(function(){
   var title = $('#example1 thead th').eq($(this).index()).text();
   $(this).html('<input type="text" placeholder="Search '+title+'" />');
 });

 //set and print the datatable
 var $dataTable = $('#example1').DataTable({
   "ajax": 'api/dateset.php',
   "iDisplayLength": 25,
   "order": [[ 6, "desc" ]],
   "scrollY": 580,
   "scrollX": true,
   "bDestroy": true,
   "stateSave": true
 });

 //Apply the search to columns
 $dataTable.columns().eq(0).each(function(colIdx){
   $('input', $('.filters th')[colIdx]).on('keyup change', function(){
     $dataTable
       .column(colIdx)
       .search(this.value)
       .draw();
   });
 });

Wenn Sie werden bemerken, in den Teil oben, wo ich die $dataTable, Sie sollten sehen, „stateSave“: true . Mit, dass, wenn die Seite aktualisiert, es funktioniert speichern Sie die parameter-Suche durch den Benutzer eingegeben werden, aber es nicht angezeigt wird der text in das Eingabefeld ein.

Das ist, wo ich geblieben bin.

Hier ist eine visuelle Darstellung:

Bevor refresh –

jQuery datatable behalten parameter

Nach refresh –

jQuery datatable behalten parameter

Wie man auf dem zweiten Bild, die Suche ist gut für die BUCHUNG von Anfang an mit TEST222, aber der text ist nicht mehr sichtbar in der BUCHUNG Eingabefeld.

Habe ich in diesem post: https://datatables.net/reference/option/stateSaveCallback

Aber ich bin nicht sicher, wie Sie Sie umsetzen, der code in meinem code. Ich bin auch nicht sicher, ob stateSaveCallback ist die richtige Funktion zu verwenden.

Wenn du einen Fehler in meinem code, oder wenn Sie wissen, wie stateSaveCallback mein code, bitte erleuchte mich, wie es zu benutzen.

InformationsquelleAutor John Beasley | 2016-05-04



2 Replies
  1. 5

    Schließlich fand ich diesen Eintrag: http://live.datatables.net/neqozaj/1/edit

    Nutzen, dass die post, ich war in der Lage, fügen Sie dieses Stück code, um die Allgemeine Funktion:

     var state = $dataTable.state.loaded();
     if ( state ) {
       $dataTable.columns().eq( 0 ).each( function ( colIdx ) {
       var colSearch = state.columns[colIdx].search;
    
       if ( colSearch.search ) {
         $('input', $('.filters th')[colIdx]).val( colSearch.search );
       }
      });
      $dataTable.draw();
     }

    Verwendung dieses, ich war in der Lage, um den Effekt zu erzielen den ich wollte.

  2. 0

    Wenn Sie die Spalte Ebene filtern, dann versuchen Sie, den untenstehenden code.

    //Restore state, search and column level filter
        var state = table.state.loaded();
        if (state) {
            table.columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;
    
                if (colSearch.search) {
                    $('input', table.column(colIdx).header()).val(colSearch.search);
                }
            });
    
            table.draw();
        }
    
    
        //Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.