Notes about the addWidget template:

addWidget Template

// 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',
// set the priority of the widget (optional)
priority: 10,
// 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*
// set the initFlag to 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, refreshing){
// do what ever needs to be done to remove stuff added by your widget
// unbind events, restore hidden content, etc.
// refreshing flag is true when the refreshWidgets method is triggered, meaning
// the widget will be removed, then immediately reapplied
}
});

Demo

Name
Major
Sex
English
Japanese
Calculus
Geometry
NameMajorSexEnglishJapaneseCalculusGeometry
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
NameMajorSexEnglishJapaneseCalculusGeometry
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
NameMajorSexEnglishJapaneseCalculusGeometry
Student20Mathematicsmale40454080
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Languagesfemale85808080
NameMajorSexEnglishJapaneseCalculusGeometry
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
NameMajorSexEnglishJapaneseCalculusGeometry
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
NameMajorSexEnglishJapaneseCalculusGeometry
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student24Languagesfemale100911382

Javascript

Repeat Headers Widget

$(function() {

// add new widget called repeatHeaders
// updated v2.18.0 (works in nested tables)
// *****************************************
$.tablesorter.addWidget({

id: "repeatHeaders",
priority: 10,
options: {
rowsToSkip : 4
},
// format is called on init and when a sorting has finished
format: function(table, c, wo) {
var h = '', i, $tr, l, skip;
// cache and collect all TH headers
if (!wo.repeatHeaders) {
// "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
h = '<tr class="repeated-header remove-me">';
$.each(c.headerContent, function(i,t) {
// 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
h += '<th>' + t + '</th>';
});
wo.repeatHeaders = h + '</tr>';
}

// number of rows to skip
skip = wo && wo.rowsToSkip || 4;

// remove appended headers by classname
c.$tbodies.children("tr.repeated-header").remove();
// only find visible rows (may be filtered)
$tr = c.$tbodies.children('tr:visible');
l = $tr.length;
// loop all tr elements and insert a copy of the "headers"
for (i = skip; i < l; i += skip) {
// insert a copy of the table head every X rows
$tr.eq(i).before(wo.repeatHeaders);
}
},
// this remove function is called when using the refreshWidgets method or when destroying the tablesorter plugin
// this function only applies to tablesorter v2.4+
remove: function(table, c){
c.$tbodies.children("tr.repeated-header").remove();
}

});

// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
theme: 'blue',

// apply both widgets
widgets: ['zebra', 'repeatHeaders'],
widgetOptions : {
rowsToSkip : 4
}
});

});

Next up: Pager plugin ››