2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
< html >
2011-06-22 23:19:27 +00:00
< head >
2011-07-17 15:01:18 +00:00
< meta charset = "utf-8" >
2011-06-22 23:19:27 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Writing custom widgets< / title >
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2011-06-22 23:19:27 +00:00
<!-- Demo stuff -->
2011-07-17 15:01:18 +00:00
< 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 >
2011-06-22 23:19:27 +00:00
<!-- 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 >
<!-- Tablesorter: optional -->
< script src = "../addons/pager/jquery.tablesorter.pager.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
// add new widget called repeatHeaders
2014-10-11 05:21:08 +00:00
// updated v2.18.0 (works in nested tables)
// *****************************************
2011-07-17 15:01:18 +00:00
$.tablesorter.addWidget({
2011-06-22 23:19:27 +00:00
2011-07-17 15:01:18 +00:00
id: "repeatHeaders",
2013-03-31 17:18:20 +00:00
priority: 10,
2013-03-05 18:02:28 +00:00
options: {
rowsToSkip : 4
},
// format is called on init and when a sorting has finished
format: function(table, c, wo) {
2013-03-31 17:18:20 +00:00
var h = '', i, $tr, l, skip;
2011-07-17 15:01:18 +00:00
// cache and collect all TH headers
2013-03-31 17:18:20 +00:00
if (!wo.repeatHeaders) {
2014-02-01 16:19:26 +00:00
// "remove-me" class was added in case the table needs to be updated, the "remove-me" rows will be
// removed prior to the update to prevent including the rows in the update - see "selectorRemove" option
2013-03-31 17:18:20 +00:00
h = '< tr class = "repeated-header remove-me" > ';
$.each(c.headerContent, function(i,t) {
2014-02-01 16:19:26 +00:00
// table.config.headerContent stores the original table HTML (as text), but it is the HTML before
// the headerTemplate option is applied to each header cell; and before the `onRender` callbacks are
// executed
2013-03-31 17:18:20 +00:00
h += '< th > ' + t + '< / th > ';
2011-07-17 15:01:18 +00:00
});
2013-03-31 17:18:20 +00:00
wo.repeatHeaders = h + '< / tr > ';
2011-07-17 15:01:18 +00:00
}
2011-06-22 23:19:27 +00:00
2012-05-28 15:01:40 +00:00
// number of rows to skip
2013-03-05 18:02:28 +00:00
skip = wo & & wo.rowsToSkip || 4;
2012-05-28 15:01:40 +00:00
2013-03-31 17:18:20 +00:00
// remove appended headers by classname
2014-10-11 05:21:08 +00:00
c.$tbodies.children("tr.repeated-header").remove();
// only find visible rows (may be filtered)
$tr = c.$tbodies.children('tr:visible');
2013-03-31 17:18:20 +00:00
l = $tr.length;
2011-07-17 15:01:18 +00:00
// loop all tr elements and insert a copy of the "headers"
2013-03-31 17:18:20 +00:00
for (i = skip; i < l ; i + = skip ) {
2011-07-17 15:01:18 +00:00
// insert a copy of the table head every X rows
2013-03-31 17:18:20 +00:00
$tr.eq(i).before(wo.repeatHeaders);
2011-06-22 23:19:27 +00:00
}
2012-09-27 19:57:19 +00:00
},
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
// this function only applies to tablesorter v2.4+
2013-03-31 17:18:20 +00:00
remove: function(table, c){
2014-10-11 05:21:08 +00:00
c.$tbodies.children("tr.repeated-header").remove();
2011-07-17 15:01:18 +00:00
}
});
2011-06-22 23:19:27 +00:00
2011-07-17 15:01:18 +00:00
// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
2012-09-27 19:57:19 +00:00
theme: 'blue',
2011-07-17 15:01:18 +00:00
// apply both widgets
2014-02-01 16:19:26 +00:00
widgets: ['zebra', 'repeatHeaders'],
widgetOptions : {
rowsToSkip : 4
}
2011-06-22 23:19:27 +00:00
});
2011-07-17 15:01:18 +00:00
});< / script >
2011-06-22 23:19:27 +00:00
< / head >
< body >
2011-07-17 15:01:18 +00:00
< div id = "banner" >
2011-06-22 23:19:27 +00:00
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Writing custom widgets< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
2011-07-17 15:01:18 +00:00
< div id = "main" >
2013-03-05 18:02:28 +00:00
< div class = "tip" >
2013-03-26 21:16:13 +00:00
Notes about the < code > addWidget< / code > template:
2013-03-05 18:02:28 +00:00
< ul >
2014-02-01 16:19:26 +00:00
< li > The < code > id< / code > block:
< ul >
< li > The widget id, or name, must be unique!< / li >
< li > The id, or name, can contain special characters and/or spaces.< / li >
< li > This setting is required.< / li >
< / ul >
< / li >
< li > The < code > priority< / code > block (added < span class = "version" > v2.9< / span > ):
2013-03-31 17:18:20 +00:00
< ul >
< li > Set the widget priority using any number; think of it like setting the css z-index.< / li >
< li > This tells the plugin the order in which to run the widgets, lowest number priority first.< / li >
< li > The default widgets have priorities set in intervals of 10 (see the < a href = "index.html#Widget-options" > widget priority table< / a > ), so to run your custom widget before a specific widget, set your widget priority to less than that number.< / li >
2014-02-01 16:19:26 +00:00
< li > This block is < strong > not supported in older versions< / strong > !< / li >
< li > This setting is optional, but if no priority is specified, it defaults to < code > 10< / code > .< / li >
2013-03-31 17:18:20 +00:00
< / ul >
< / li >
2014-02-01 16:19:26 +00:00
< li > The < code > options< / code > block (added < span class = "version" > v2.8< / span > ):
2013-03-05 18:02:28 +00:00
< ul >
< li > Include any widget options to be automatically be extended with any set widgetOptions (from < code > table.config.widgetOptions< / code > ).< / li >
2013-05-27 13:38:55 +00:00
< li > As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This changed when v2.9 was released.< / li >
2014-02-01 16:19:26 +00:00
< li > This block is < strong > not supported in older versions< / strong > !< / li >
2013-03-05 18:02:28 +00:00
< li > This block is optional.< / li >
< / ul >
< / li >
2014-02-01 16:19:26 +00:00
< li > The < code > init< / code > block (added v2.0.28):
2013-03-05 18:02:28 +00:00
< ul >
2014-02-01 16:19:26 +00:00
< li > This code is called only after tablesorter has initialized, but before initial sort and before < strong > any< / strong > of the widgets are applied (via the < code > format< / code > block); it is only run once.< / li >
< li > Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before; but some of the newer widgets (post v2.9) are using this code block.< / li >
< li > This block is < strong > not supported in older versions< / strong > .< / li >
2013-03-05 18:02:28 +00:00
< li > This block is optional.< / li >
< / ul >
< / li >
2014-02-01 16:19:26 +00:00
< li > The < code > format< / code > block (modified v2.0.23):
2013-03-05 18:02:28 +00:00
< ul >
< li > This block is part of the original < code > addWidget< / code > template and is required.< / li >
< li > In the original template, only the < code > table< / code > parameter is provided. After v2.0.28, < code > config< / code > and < code > widgetOptions< / code > were provided as additional parameters (sorry the previous docs were incorrect).< / li >
< li > The < code > initFlag< / code > is correctly set in v2.8+.< / li >
< / ul >
< / li >
2014-02-01 16:19:26 +00:00
< li > The < code > remove< / code > block (added v2.4):
2013-03-05 18:02:28 +00:00
< ul >
2015-01-12 02:02:39 +00:00
< li > In < span class = "version" > v2.18.5< / span > the < code > temp< / code > parameter was added:
< ul >
< li > It is a parameter used to indicate that the < a href = "index.html#refreshwidgets" > < code > refreshWidgets< / code > < / a > method was triggered.< / li >
< li > When widgets are refreshed, the < code > remove< / code > method is called, then the widget < code > init< / code > function is immediately called to reapply the widget.< / li >
< li > In this update, this parameter is used by the filter widget to retain filtered rows and prevent a "flash" of showing all rows, then returning to its previous state after applying the filter again.< / li >
< / ul >
< / li >
2013-03-05 18:02:28 +00:00
< li > This code is called when either the < a href = "index.html#refreshwidgets" > < code > refreshWidgets< / code > < / a > or < a href = "index.html#destroy" > < code > destroy< / code > < / a > methods are called.< / li >
< li > The code contained within this block must remove all additional content/elements added by the widget. Also, any rows or content that is hidden must be restored.< / li >
< li > If additional rows are added to the table, make sure to include the class name within the < a href = "index.html#selectorremove" > < code > selectorRemove< / code > < / a > option.< / li >
2014-02-01 16:19:26 +00:00
< li > This block was added in v2.4, and < strong > not supported in older versions< / strong > .< / li >
< li > This block is optional.< / li >
2013-03-05 18:02:28 +00:00
< / ul >
< / li >
< / ul >
< / div >
< h3 > addWidget Template< / h3 >
< div >
< pre class = "prettyprint lang-javascript" > // addWidget Template
// *******************
// parameters:
// table = table object (DOM)
// config = config object (from table.config)
// widgetOptions = all widget options (from table.config.widgetOptions)
$.tablesorter.addWidget({
id: 'myWidget',
2013-03-31 17:18:20 +00:00
// set the priority of the widget (optional)
priority: 10,
2013-03-05 18:02:28 +00:00
// widget options (added v2.8) - added to table.config.widgetOptions
options: {
myWidget_option1 : 'setting1',
myWidget_option2 : 'setting2'
},
// The init function (added v2.0.28) is called only after tablesorter has
// initialized, but before initial sort & before any of the widgets are applied.
init: function(table, thisWidget, config, widgetOptions){
// widget initialization code - this is only *RUN ONCE*
// but in this example, only the format function is called to from here
// to keep the widget backwards compatible with the original tablesorter
thisWidget.format(table, config, widgetOptions, true);
},
format: function(table, config, widgetOptions, initFlag) {
// widget code to apply to the table *AFTER EACH SORT*
2014-02-01 16:19:26 +00:00
// set the initFlag to true when this format is called from the init
2013-03-05 18:02:28 +00:00
// function above otherwise initFlag is undefined
// * see the saveSort widget for a full example *
},
2015-01-12 02:02:39 +00:00
remove: function(table, config, widgetOptions, temp){
2013-03-05 18:02:28 +00:00
// do what ever needs to be done to remove stuff added by your widget
// unbind events, restore hidden content, etc.
2015-01-12 02:02:39 +00:00
// temp flag is true when the refreshWidgets method is triggered, meaning
// the widget will be removed, then immediately reapplied
2013-03-05 18:02:28 +00:00
}
});< / pre >
< / div >
2011-07-17 15:01:18 +00:00
< h1 > Demo< / h1 >
2011-06-22 23:19:27 +00:00
2011-07-17 15:01:18 +00:00
< table class = "tablesorter" >
2011-06-22 23:19:27 +00:00
< thead >
2013-03-05 18:02:28 +00:00
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th > Geometry< / th > < / tr >
2011-06-22 23:19:27 +00:00
< / thead >
< tfoot >
2013-03-05 18:02:28 +00:00
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th > Geometry< / th > < / tr >
2011-06-22 23:19:27 +00:00
< / tfoot >
< tbody >
2013-03-05 18:02:28 +00:00
< tr > < td > Student12< / td > < td > Mathematics< / td > < td > female< / td > < td > 100< / td > < td > 75< / td > < td > 70< / td > < td > 85< / td > < / tr >
< tr > < td > Student13< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 80< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student14< / td > < td > Languages< / td > < td > female< / td > < td > 50< / td > < td > 45< / td > < td > 55< / td > < td > 90< / td > < / tr >
< tr > < td > Student15< / td > < td > Languages< / td > < td > male< / td > < td > 95< / td > < td > 35< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student16< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 50< / td > < td > 30< / td > < td > 70< / td > < / tr >
< tr > < td > Student17< / td > < td > Languages< / td > < td > female< / td > < td > 80< / td > < td > 100< / td > < td > 55< / td > < td > 65< / td > < / tr >
< tr > < td > Student18< / td > < td > Mathematics< / td > < td > male< / td > < td > 30< / td > < td > 49< / td > < td > 55< / td > < td > 75< / td > < / tr >
< tr > < td > Student19< / td > < td > Languages< / td > < td > male< / td > < td > 68< / td > < td > 90< / td > < td > 88< / td > < td > 70< / td > < / tr >
< tr > < td > Student20< / td > < td > Mathematics< / td > < td > male< / td > < td > 40< / td > < td > 45< / td > < td > 40< / td > < td > 80< / td > < / tr >
< tr > < td > Student21< / td > < td > Languages< / td > < td > male< / td > < td > 50< / td > < td > 45< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student22< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student23< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 80< / td > < td > 80< / td > < td > 80< / td > < / tr >
< tr > < td > Student01< / td > < td > Languages< / td > < td > male< / td > < td > 80< / td > < td > 70< / td > < td > 75< / td > < td > 80< / td > < / tr >
< tr > < td > Student02< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 88< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student03< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 95< / td > < td > 80< / td > < td > 85< / td > < / tr >
< tr > < td > Student04< / td > < td > Languages< / td > < td > male< / td > < td > 60< / td > < td > 55< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student05< / td > < td > Languages< / td > < td > female< / td > < td > 68< / td > < td > 80< / td > < td > 95< / td > < td > 80< / td > < / tr >
< tr > < td > Student06< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student07< / td > < td > Mathematics< / td > < td > male< / td > < td > 85< / td > < td > 68< / td > < td > 90< / td > < td > 90< / td > < / tr >
< tr > < td > Student08< / td > < td > Languages< / td > < td > male< / td > < td > 100< / td > < td > 90< / td > < td > 90< / td > < td > 85< / td > < / tr >
< tr > < td > Student09< / td > < td > Mathematics< / td > < td > male< / td > < td > 80< / td > < td > 50< / td > < td > 65< / td > < td > 75< / td > < / tr >
< tr > < td > Student10< / td > < td > Languages< / td > < td > male< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student11< / td > < td > Languages< / td > < td > male< / td > < td > 86< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student24< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 91< / td > < td > 13< / td > < td > 82< / td > < / tr >
2011-06-22 23:19:27 +00:00
< / tbody >
< / table >
2011-07-17 15:01:18 +00:00
< h1 > Javascript< / h1 >
2013-03-05 18:02:28 +00:00
< h3 > Repeat Headers Widget< / h3 >
2012-02-16 11:59:09 +00:00
2011-07-17 15:01:18 +00:00
< 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 >
< div class = "next-up" >
< hr / >
2011-10-26 06:50:02 +00:00
Next up: < a href = "example-pager.html" > Pager plugin › › < / a >
2011-07-17 15:01:18 +00:00
< / div >
2011-06-22 23:19:27 +00:00
< / div >
< / body >
< / html >
