clear/reapply tastersorter filterung auf pageload

Question

Ich bin nicht stark mit dem Javascript, und ich kann manchmal kopieren JQuery-Code und es funktioniert. Bitte haben Sie Geduld mit mir.

Ich verwende die neueste Version von tablesorter wie vor ein paar Tagen.

Ich habe eine Seite mit einer Tabelle und einem Kontrollkästchen. Wenn das Kontrollkästchen aktiviert ist, verwende ich einen Filter für die 7. Zeile, der den Wert einer Dropdown-Box darstellt. Es funktioniert perfekt.

Wenn ich die Seite posten, ist der Filter verloren, aber das Kontrollkästchen checked status wird beibehalten, was nicht synchron ist. Also rufe ich die Funktion auf, die den Checkbox-Status liest und den Filter erneut setzt, aber es funktioniert nicht. Es scheint, dass die Tabelle nicht initialisiert ist und der Filter somit nicht angewendet wird. Ich habe versucht, die _LoadComplete in der CodeBehind und in einer window.onload -Funktion. Keine Arbeit.

Also habe ich beide filterinit und filterend Funktionen, und eine einfache filter_saveFilters: true. Dies hält die Filterung perfekt aufrecht, aber wenn ich auf eine andere Seite gehe und zurückkomme, wird der Filter beibehalten und das Kontrollkästchen ist deaktiviert. Wieder nicht synchron.

Ich sehe, dass es 2 Methoden gibt, mit denen die gespeicherten Filter zurückgesetzt werden können. $ ('table'). trigger ('filterReset'); $ ('table'). trigger ('filterResetSaved'); Ich kann sie nicht zur Arbeit bringen.

Alle Probleme sind zum Zeitpunkt des Ladens der Seite. Einfach, wenn das Kontrollkästchen aktiviert ist, wenden Sie Filter an und behalten Sie es bei, bis das Kontrollkästchen geändert oder die Seite ohne Postback geladen wird.

Filterfunktion, die das Kontrollkästchen und die Dropdown-Box liest und den Filter und die Inkorporation des Tabellensortierers einstellt.

function filterTS() { 
    if (document.getElementById("slideTwo").checked == true) { 
     var e = document.getElementById("selUsers"); 
     var selectedText = e.options[e.selectedIndex].text; 
     var filters = $('table').find('input.tablesorter-filter'), col = 7, txt = selectedText, cur = filters.eq(col).val(), mult, i; 
     } 
     else { 
      var filters = $('table').find('input.tablesorter-filter'), col = 7, txt = '', cur = filters.eq(col).val(), mult, i; 
     } 
     if (cur && txt !== "") { 
      mult = cur.split('|'); 
      i = $.inArray(txt, mult); 
      if (i < 0) { 
       mult.push(txt); 
      } else { 
       mult.splice(i, 1); 
      } 
      txt = mult.join('|'); 
     } 
     filters.eq(col).val(txt).trigger('search', false); 
    } 
    //Tablesorter Initialization 
    $(window).ready(function() { 
     $("#GridView1").tablesorter({ 
      theme: 'green', 
      sortList: [[0, 1]], 
      headerTemplate: '{content}{icon}', 
      dateFormat: 'mmddyyyy', 
      sortMultiSortKey: 'shiftKey', 
      sortResetKey: 'ctrlKey', 
      usNumberFormat: true, 
      widgets: ['zebra', 'filter'], 
      widgetOptions: { 
       filter_ignoreCase: true, 
      } 
     }); 
     $('table') 
      .bind('filterInit', function() { 
       // check that storage ulility is loaded 
       if ($.tablesorter.storage) { 
        // get saved filters 
        var f = $.tablesorter.storage(this, 'tablesorter-filters') || []; 
        $(this).trigger('search', [f]); 
       } 
      }) 
      .bind('filterEnd', function() { 
       if ($.tablesorter.storage) { 
        // save current filters 
        var f = $(this).find('.tablesorter-filter').map(function() { 
        return $(this).val() || ''; 
        }).get(); 
        $.tablesorter.storage(this, 'tablesorter-filters', f); 
       } 
      }); 
     $("#slideTwo").on("click", filterTS); 
     $("#slideOne").on("click", hidedates); 

Was mache ich falsch? Warum kann ich den Filter nicht über den Code beim Laden der Seite einstellen? Wo zur Hölle setze ich:

$('table').trigger('filterReset'); 
$('table').trigger('filterResetSaved'); 

Muss ich 'Tabelle' zu '# Gridview1' ändern? Nichts scheint zu funktionieren.

Answer 1

Try this:

$(document).ready(function(){ 
    $('table').trigger('update'); 
}); 

Oder diese:

$(document).ready(function(){ 
    $('table').trigger('updateAll', [resort]); 
}); 

Answer 2

Zunächst einmal den Code, der für "filterInit" eingerichtet ist und "filterEnd" sind im Wesentlichen die gleichen wie Einstellung der filter_saveFilters option zu true .

Mit $('table').trigger('filterResetSaved'); ist die Methode erforderlich, um die gespeicherten Filterwerte zu löschen; aber wieder funktioniert es nur, wenn die filter_saveFilters Option true ist.

Wie für das Kontrollkästchen können Sie das Kontrollkästchen Attribut autocomplete="off" (ref) festlegen, um den Status auf Seite aktualisieren zu lassen; aber jetzt mit der filter_saveFilters Option auf true eingestellt, werden alle Filter gesetzt durch Überprüfung #slideTwo auf Seitenaktualisierung eingestellt, weil die Filterwerte gespeichert werden .. vielleicht könnte der Wert dieses Filters bei der Initialisierung von tablesorter überprüft werden, und wenn er mit den Werten für übereinstimmt #slideTwo, könnten Sie den Checkbox-Status setzen?

Wenn Sie Hilfe mit diesem Code benötigen, wäre es einfacher, wenn Sie eine Demo oder ein Beispiel bereitstellen. Ich setze this demo für Sie zu ändern.

$(function() { 
    $("#GridView1").tablesorter({ 
    theme: 'green', 
    sortList: [[0, 1]], 
    headerTemplate: '{content}{icon}', 
    // dateFormat: 'mmddyyyy', 
    // sortMultiSortKey: 'shiftKey', 
    // sortResetKey: 'ctrlKey', 
    // usNumberFormat: true, 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     // filter_ignoreCase: true, 
     filter_saveFilters: true 
    }, 
    initialize: function(table) { 
     var c = table.config, 
     $s2 = $('#slideTwo'), 
     // c.$filters points to the TD, not the input 
     $filter = c.$filters.eq(3).find('.tablesorter-filter'), 
     val = $filter.val(); 
     $s2.prop('checked', val === 'something'); 
    } 
    }); 
}); 

* Hinweis: Die auskommentierten Optionen sind bereits auf ihren Standardwert eingestellt.

Answer 3

Also machte ich die ganze Operation leichter durch den Datenwert auf den Kopf der Tabelle hinzufügen, wenn das Kontrollkästchen wie so in Code hinter Seite Loadcomplete ....

geprüft wird

If Me.slideTwo.Checked=True Then GridView1.HeaderRow.Cells(10).Attributes.Add("data-value",selUsers.SelectedItem.Text) 

und presto changeo hat ein Vergnügen gemacht. Ich weiß immer noch nicht, warum das Aufrufen der JavaScript-Funktion nach der Initialisierung des Tabellensortierers tatsächlich nicht funktioniert. Es setzt den Text in das Filterfeld, aber es wendet es nicht an. Das Javascript funktioniert großartig, sobald die Seite geladen ist.