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 -->
2012-09-27 19:57:19 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.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
2012-02-16 11:59:09 +00:00
// ************************************
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) {
h = '< tr class = "repeated-header remove-me" > ';
$.each(c.headerContent, function(i,t) {
h += '< th > ' + t + '< / th > ';
2011-07-17 15:01:18 +00:00
});
2013-03-31 17:18:20 +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
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
c.$table.find("tr.repeated-header").remove();
$tr = c.$tbodies.find('tr');
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){
c.$table.find("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
widgets: ['zebra', 'repeatHeaders']
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 >
< li > The < code > id< / code > block is required and must be unique.< / li >
2013-03-31 17:18:20 +00:00
< li > The < code > priority< / code > block is optional (< span class = "tip" > < em > New!< / em > in v2.9< / span > ):
< 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 >
< / ul >
< / li >
2013-03-05 18:02:28 +00:00
< li > The < code > options< / code > block (< span class = "tip" > < em > New!< / em > in v2.8< / span > ):
< ul >
< li > Include any widget options to be automatically be extended with any set widgetOptions (from < code > table.config.widgetOptions< / code > ).< / li >
< li > This block was added in tablesorter v2.8 and is not supported in older versions!< / li >
< li > As of v2.8, no included widgets will be using this to maintain backwards compatibility with older versions. This will change when v3.0 is released.< / li >
< li > This block is optional.< / li >
< / ul >
< / li >
< li > The < code > init< / code > block:
< ul >
< li > This code is called only after tablesorter has initialized, but before initial sort and before any of the widgets are applied; it is only run once.< / li >
< li > This block was added in v2.0.28 and it not supported in older versions.< / li >
< li > Since, v2.0.28, only the saveSort widget uses this block to ensure that the stored sort is applied before .< / li >
< li > This block is optional.< / li >
< / ul >
< / li >
< li > The < code > format< / code > block:
< 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 >
< li > The < code > remove< / code > block:
< ul >
< 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 >
< li > This block was added in v2.4 and is optional.< / li >
< / 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*
// the initFlag is true when this format is called from the init
// function above otherwise initFlag is undefined
// * see the saveSort widget for a full example *
},
remove: function(table, config, widgetOptions){
// do what ever needs to be done to remove stuff added by your widget
// unbind events, restore hidden content, etc.
}
});< / 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 >
