2013-02-17 19:53:33 +00:00
<!DOCTYPE html>
2011-07-17 15:01:18 +00:00
< html >
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter 2.0 - applyWidgetId vs. applyWidgets< / title >
2011-07-17 15:01:18 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2011-07-17 15:01:18 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
2013-01-26 15:21:13 +00:00
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
2011-07-17 15:01:18 +00:00
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
2012-09-27 19:57:19 +00:00
< link rel = "stylesheet" href = "../css/theme.blue.css" >
2011-07-17 15:01:18 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
2015-12-11 04:51:33 +00:00
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2011-07-17 15:01:18 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
// call the tablesorter plugin
2015-12-11 04:51:33 +00:00
$('table').tablesorter({ theme : 'blue' });
2011-07-17 15:01:18 +00:00
2018-03-17 20:30:25 +00:00
$('button.applyid').click(function() {
2015-12-11 04:51:33 +00:00
// This method adds the 'columns' widget & sorts the table to make it visible
$('table')
.trigger('applyWidgetId', 'columns')
.trigger('sorton', [ [[0,0]] ]);
2013-05-16 15:25:14 +00:00
return false;
2011-07-17 15:01:18 +00:00
});
2018-03-17 20:30:25 +00:00
$('button.apply').click(function() {
2015-12-11 04:51:33 +00:00
// This method reapplies the widgets listed in table.config.widgets
// it won't appear to do anything unless we add 'zebra' to the widgets option
$('table').data('tablesorter').widgets = ['zebra'];
2011-07-17 15:01:18 +00:00
$('table').trigger('applyWidgets');
2013-05-16 15:25:14 +00:00
return false;
2011-07-17 15:01:18 +00:00
});
2018-03-17 20:30:25 +00:00
$('button.remove').click(function() {
2015-12-11 04:51:33 +00:00
// This method removes both the zebra & columns widget entirely
$('table').trigger('removeWidget', 'zebra columns');
return false;
});
2011-07-17 15:01:18 +00:00
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > applyWidgetId versus applyWidgets< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
2015-12-11 04:51:33 +00:00
< em > NOTE!< / em >
2015-12-13 22:24:42 +00:00
< p > As of < span class = "version updated" > v2.25.0< / span > , using the < code > applyWidgetId< / code > will now add the widget to the < code > widgets< / code > options, so you will no longer notice any difference between the two methods. The difference is:< / p >
2015-12-11 04:51:33 +00:00
< ul >
< li > < code > applyWidgets< / code > - updates all widgets currently listed in the < code > table.config.widgets< / code > option (this occurs every time the user sorts or filters the table).< / li >
2015-12-13 22:24:42 +00:00
< li > < code > applyWidgetId< / code > - Adds (initializes and updates) the named widget. If the widget was not previously included in the < code > table.config.widgets< / code > option, it will be added (< span class = "version updated" > v2.25.0< / span > ). If the widget is included in the widgets option, then only the named widget will be updated.< / li >
2015-12-11 04:51:33 +00:00
< / ul >
2011-07-17 15:01:18 +00:00
< / p >
< h1 > Demo< / h1 >
< br >
2015-12-11 04:51:33 +00:00
< div id = "demo" > < button type = "button" class = "applyid" > Apply Widget Id< / button > (columns & sort)< br >
< button type = "button" class = "remove" > Remove Widget< / button > (columns & zebra)< br >
< button type = "button" class = "apply" > Apply Widgets< / button > (add 'zebra' to < code > table.config.widgets< / code > then trigger < code > applyWidgets< / code > method)
2011-07-17 15:01:18 +00:00
< table class = "tablesorter" >
< thead >
2015-12-11 04:51:33 +00:00
< tr > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Date< / th > < / tr >
2011-07-17 15:01:18 +00:00
< / thead >
< tbody >
2015-12-11 04:51:33 +00:00
< tr > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > $9.99< / td > < td > 20%< / td > < td > Jul 6, 2006 8:14 AM< / td > < / tr >
< tr > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > $19.99< / td > < td > 25%< / td > < td > Dec 10, 2002 5:14 AM< / td > < / tr >
< tr > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > $15.89< / td > < td > 44%< / td > < td > Jan 12, 2003 11:14 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > $153.19< / td > < td > 44%< / td > < td > Jan 18, 2001 9:12 AM< / td > < / tr >
< tr > < td > Bruce< / td > < td > Evans< / td > < td > 22< / td > < td > $13.19< / td > < td > 11%< / td > < td > Jan 18, 2007 9:12 AM< / td > < / tr >
2011-07-17 15:01:18 +00:00
< / tbody >
< / table > < / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-javascript" > < / pre >
2011-07-17 15:01:18 +00:00
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-html" > < / pre >
2011-07-17 15:01:18 +00:00
< / div >
< div class = "next-up" >
< hr / >
2011-10-26 06:50:02 +00:00
Next up: < a href = "example-widget-columns.html" > Columns widget › › < / a >
2011-07-17 15:01:18 +00:00
< / div >
< / div >
< / body >
< / html >
