javascript - Table doesn't reset when click on X -
i have following javascript:
$(function(){ $table = $('#mytable') .tablesorter({ theme: 'blue', widthfixed: true, headertemplate: '{content} {icon}', widgets: ['zebra','filter'], widgetoptions: { zebra: ["even", "odd"], // filter_anymatch replaced! instead use filter_external option // set use jquery selector (or jquery object) pointing // external filter (column specific or match) filter_external : '.search', // add default type search first name column filter_defaultfilter: { 1 : '~{query}' }, // include column filters filter_columnfilters: true, filter_placeholder: { search : 'search...' }, filter_savefilters : true, filter_reset: '.reset' } }) // needed pager plugin know when calculate filtered rows/pages .addclass('hasfilters') .tablesorterpager({ container: $(".table-pager"), output: '{page} of {filteredpages} ({filteredrows})', size: 5 }); $('#search').quicksearch('table tbody tr', { delay: 500, show: function () { $(this).removeclass('filtered'); $table.trigger('pageset'); // reset page 1 & update display }, hide: function () { $(this).hide().addclass('filtered'); $table.trigger('pageset'); // reset page 1 & update display }, onafter: function () { $table.trigger('update.pager'); } }); }); (function(b,k,q,r){b.fn.quicksearch=function(l,p){var m,n,h,e,f="",g=this,a=b.extend({delay:100,selector:null,striperows:null,loader:null,noresults:"",matchedresultscount:0,bind:"keyup",onbefore:function(){},onafter:function(){},show:function(){this.style.display=""},hide:function(){this.style.display="none"},preparequery:function(a){return a.tolowercase().split(" ")},testquery:function(a,b,d){for(d=0;d<a.length;d+=1)if(-1===b.indexof(a[d]))return!1;return!0}},p);this.go=function(){for(var c=0,b= 0,d=!0,e=a.preparequery(f),g=0===f.replace(" ","").length,c=0,k=h.length;c<k;c++)g||a.testquery(e,n[c],h[c])?(a.show.apply(h[c]),d=!1,b++):a.hide.apply(h[c]);d?this.results(!1):(this.results(!0),this.stripe());this.matchedresultscount=b;this.loader(!1);a.onafter();return this};this.search=function(a){f=a;g.trigger()};this.currentmatchedresults=function(){return this.matchedresultscount};this.stripe=function(){if("object"===typeof a.striperows&&null!==a.striperows){var c=a.striperows.join(" "),f=a.striperows.length; e.not(":hidden").each(function(d){b(this).removeclass(c).addclass(a.striperows[d%f])})}return this};this.strip_html=function(a){a=a.replace(regexp("<[^<]+>","g"),"");return a=b.trim(a.tolowercase())};this.results=function(c){"string"===typeof a.noresults&&""!==a.noresults&&(c?b(a.noresults).hide():b(a.noresults).show());return this};this.loader=function(c){"string"===typeof a.loader&&""!==a.loader&&(c?b(a.loader).show():b(a.loader).hide());return this};this.cache=function(){e=b(l);"string"===typeof a.noresults&& ""!==a.noresults&&(e=e.not(a.noresults));n=("string"===typeof a.selector?e.find(a.selector):b(l).not(a.noresults)).map(function(){return g.strip_html(this.innerhtml)});h=e.map(function(){return this});f=f||this.val()||"";return this.go()};this.trigger=function(){this.loader(!0);a.onbefore();k.cleartimeout(m);m=k.settimeout(function(){g.go()},a.delay);return this};this.cache();this.results(!0);this.stripe();this.loader(!1);return this.each(function(){b(this).on(a.bind,function(){f=b(this).val();g.trigger()})})}})(jquery, this,document); following html:
<form> <div> <input id="search" type="search" placeholder="search" /> </div> </form> <div class="table-pager">show <select class="pagesize"> <option selected="selected" value="5">5</option> <option value="10">10</option> </select>entries | <span class="pagedisplay"></span> | <button type="button" class="btn prev">←</button> <button type="button" class="btn next">→</button> </div> <table id="mytable"> <thead> <tr> <th>one</th> <th>two</th> <th>three</th> <th>four</th> </tr> </thead> <tbody> <tr> <td>abc 123</td> <td>10</td> <td>koala</td> <td>http://www.google.com</td> </tr> <tr> <td>abc 1</td> <td>234</td> <td>ox</td> <td>http://www.yahoo.com</td> </tr> <tr> <td>abc 9</td> <td>10</td> <td>girafee</td> <td>http://www.facebook.com</td> </tr> <tr> <td>zyx 24</td> <td>767</td> <td>bison</td> <td>http://www.whitehouse.gov/</td> </tr> <tr> <td>abc 11</td> <td>3</td> <td>chimp</td> <td>http://www.ucla.edu/</td> </tr> <tr> <td>abc 2</td> <td>56</td> <td>elephant</td> <td>http://www.wikipedia.org/</td> </tr> <tr> <td>abc 9</td> <td>155</td> <td>lion</td> <td>http://www.nytimes.com/</td> </tr> <tr> <td>abc 10</td> <td>87</td> <td>zebra</td> <td>http://www.google.com</td> </tr> <tr> <td>zyx 1</td> <td>999</td> <td>koala</td> <td>http://www.mit.edu/</td> </tr> <tr> <td>zyx 12</td> <td>0</td> <td>llama</td> <td>http://www.nasa.gov/</td> </tr> <tr> <td>abc 111</td> <td>10</td> <td>koala</td> <td>http://www.google.com</td> </tr> <tr> <td>abc 1</td> <td>234</td> <td>ox</td> <td>http://www.yahoo.com</td> </tr> <tr> <td>abc 9</td> <td>10</td> <td>girafee</td> <td>http://www.facebook.com</td> </tr> <tr> <td>zyx 24</td> <td>767</td> <td>bison</td> <td>http://www.whitehouse.gov/</td> </tr> <tr> <td>abc 11</td> <td>3</td> <td>chimp</td> <td>http://www.ucla.edu/</td> </tr> <tr> <td>abc 2</td> <td>56</td> <td>elephant</td> <td>http://www.wikipedia.org/</td> </tr> <tr> <td>abc 9</td> <td>155</td> <td>lion</td> <td>http://www.nytimes.com/</td> </tr> <tr> <td>abc 10</td> <td>87</td> <td>zebra</td> <td>http://www.google.com</td> </tr> <tr> <td>zyx 1</td> <td>999</td> <td>koala</td> <td>http://www.mit.edu/</td> </tr> <tr> <td>zyx 12</td> <td>0</td> <td>llama</td> <td>http://www.nasa.gov/</td> </tr> <tr> <td>abc 222</td> <td>10</td> <td>koala</td> <td>http://www.google.com</td> </tr> <tr> <td>abc 1</td> <td>234</td> <td>ox</td> <td>http://www.yahoo.com</td> </tr> <tr> <td>abc 9</td> <td>10</td> <td>girafee</td> <td>http://www.facebook.com</td> </tr> <tr> <td>zyx 24</td> <td>767</td> <td>bison</td> <td>http://www.whitehouse.gov/</td> </tr> <tr> <td>abc 11</td> <td>3</td> <td>chimp</td> <td>http://www.ucla.edu/</td> </tr> <tr> <td>abc 2</td> <td>56</td> <td>elephant</td> <td>http://www.wikipedia.org/</td> </tr> <tr> <td>abc 9</td> <td>155</td> <td>lion</td> <td>http://www.nytimes.com/</td> </tr> <tr> <td>abc 10</td> <td>87</td> <td>zebra</td> <td>http://www.google.com</td> </tr> <tr> <td>zyx 1</td> <td>999</td> <td>koala</td> <td>http://www.mit.edu/</td> </tr> <tr> <td>zyx 12</td> <td>0</td> <td>llama</td> <td>http://www.nasa.gov/</td> </tr> </tbody> </table> it works good. have 1 issue only.
when click x reset filter - nothings happens.
desired result - filter should reset , table should update.
also have problem when erase symbols in search field - table don't update 
how fix issue?
it looks quicksearch demo no longer works properly.
so, instead of using quicksearch plugin, use filter widget match content in columns:
<input class="search" type="search" data-column="all"> then include input external filter, , hide filter row
filter_external : '.search', filter_columnfilters: false to same thing, , have "x" in input work properly.
full code & demo:
$(function () { $table = $('#mytable') .tablesorter({ theme: 'blue', widthfixed: true, headertemplate: '{content} {icon}', widgets: ['zebra', 'filter'], widgetoptions: { zebra: ["even", "odd"], filter_external: '.search', filter_columnfilters: false } }) .tablesorterpager({ container: $(".table-pager"), output: '{page} of {filteredpages} ({filteredrows})', size: 5 }); });