jquery tableorter प्लगइन फ़िल्टर के साथ एक अजाक्स अद्यतन

Question

के बाद चयनित रीसेट के साथ प्लगइन मैं टेबललेटर प्लगइन का उपयोग कर रहा हूं और यह किसी आइटम को AJAX के जरिए जोड़ा गया है, इसके बाद किसी चयनित आइटम का फ़िल्टर मान रखना चाहूंगा।

"जब नया डेटा अपडेट हो जाता है तो चयन अपडेट हो जाता है, हालांकि, अगर उपयोगकर्ता द्वारा एक विकल्प चुना गया था, जब चयन दोहराया जाता है, तो उपयोगकर्ता चयन सहेजा नहीं जाता है। उदाहरण के लिए, अपने फीडल में -" ब्रूस "पर क्लिक करें फिर "पंक्ति जोड़ें" पर क्लिक करें। "ब्रूस" के लिए विकल्प रीसेट किया गया है और तालिका रीफ्रेश "

यह बिल्कुल इस प्रश्न की तरह है। मैंने टिप्पणी में एक सवाल भी पूछा लेकिन अभी तक नहीं सुना है। Updating a JQuery Tablesorter Filter Function

किसी भी विचार की सराहना की जाएगी।

अपडेट: ऐसा लगता है कि संस्करण 3 में एक फिल्टर सहेजें विजेट है। क्या किसी ने यह काम किया है? देखें: https://github.com/Mottie/tablesorter/issues/178

 
$.tablesorter.addWidget({ 
    id: 'FilterSave', 
    format: function(table, init){ 
     var sl, time, c = table.config, 
      wo = c.widgetOptions, 
      ss = wo.FilterSave !== false; // make FilterSave active/inactive; default to true 

     var count_filters = $(table).find('input.tablesorter-filter').length; 
     var filter = new Array(); 
     for (var i=0; i 0) 
      { 
       $(table).trigger('search', [filter]); 
      } 
     } 
    }, 
    remove: function(table, c, wo){ 
     // clear storage 
     $.tablesorter.storage(table, 'tablesorter-savefilter', ''); 
    } 
}); 

पुराने उदाहरण

नीचे दिए गए उदाहरण के इस बेला (http://jsfiddle.net/4yKMq/) और भाग देखें। धन्यवाद

$(function() { 

// call the tablesorter plugin 
$("table").tablesorter({ 
    theme: 'blue', 

    // hidden filter input/selects will resize the columns, so try to minimize the change 
    widthFixed : true, 

    // initialize zebra striping and filter widgets 
    widgets: ["zebra", "filter"], 

    // headers: { 5: { sorter: false, filter: false } }, 

    widgetOptions : { 

     // css class applied to the table row containing the filters & the inputs within that row 
     filter_cssFilter : 'tablesorter-filter', 

     // If there are child rows in the table (rows with class name from "cssChildRow" option) 
     // and this option is true and a match is found anywhere in the child row, then it will make that row 
     // visible; default is false 
     filter_childRows : false, 

     // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately 
     // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus 
     filter_hideFilters : false, 

     // Set this option to false to make the searches case sensitive 
     filter_ignoreCase : true, 

     // jQuery selector string of an element used to reset the filters 
     filter_reset : '.reset', 

     // Delay in milliseconds before the filter widget starts searching; This option prevents searching for 
     // every character while typing and should make searching large tables faster. 
     filter_searchDelay : 300, 

     // Set this option to true to use the filter to find text from the start of the column 
     // So typing in "a" will find "albert" but not "frank", both have a's; default is false 
     filter_startsWith : false, 

     // if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately 
     // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus 
     filter_hideFilters : false, 

     // Add select box to 4th column (zero-based index) 
     // each option has an associated function that returns a boolean 
     // function variables: 
     // e = exact text from cell 
     // n = normalized value returned by the column parser 
     // f = search filter input value 
     // i = column index 
     filter_functions : { 

      // Add select menu to this column 
      // set the column value to true, and/or add "filter-select" class name to header 
      0 : true, 

      // Exact match only 
      1 : function(e, n, f, i) { 
       return e === f; 
      }, 

      // Add these options to the select dropdown (regex example) 
      2 : { 
       "A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); }, 
       "E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); }, 
       "I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); }, 
       "M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); }, 
       "Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); }, 
       "U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); }, 
       "Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); } 
      }, 

      // Add these options to the select dropdown (numerical comparison example) 
      // Note that only the normalized (n) value will contain numerical data 
      // If you use the exact text, you'll need to parse it (parseFloat or parseInt) 
      4 : { 
       "< $10"  : function(e, n, f, i) { return n < 10; }, 
       "$10 - $100" : function(e, n, f, i) { return n >= 10 && n <=100; }, 
       "> $100"  : function(e, n, f, i) { return n > 100; } 
      } 
     } 

    } 

}); 

$('button.add').click(function() { 
    var newRow = "<tr><td>James</td><td>Franco</td><td>Hollywood</td><td>31</td><td>$33.33</td><td>13%</td><td>Oct 22, 2010 1:25 PM</td></tr>"; 
    $('table') 
    .find('tbody').append(newRow) 
    .trigger('update'); 
}); 

Answer 1

के बजाय sortupdate कोशिश करेंगे आप अद्यतन करने से पहले फिल्टर सामग्री को बचाने, तो यह बहाल, फिल्टर यह सेट करता है बनाए रखेगी (demo):

var newRow = "<tr><td>James</td><td>Franco</td><td>Hollywood</td><td>31</td><td>$33.33</td><td>13%</td><td>Oct 22, 2010 1:25 PM</td></tr>", 
    // store current filters 
    savedFilters = $('table').find('.tablesorter-filter').map(function(){ 
     return this.value || ''; 
    }).get(); 
$('table') 
    .find('tbody').append(newRow) 
    .trigger('update').end() 
    // restore filters 
    .find('.tablesorter-filter').each(function(i){ 
     $(this).val(savedFilters[i]); 
    }) 
    .trigger('search'); 

मैं इसे स्वचालित रूप से होने में देखता हूं।

Answer 2

मैं update

$('table') 
    .find('tbody').append(newRow) 
    .trigger('sortupdate');