Demo
Name |
Major |
Sex |
English |
Japanese |
Calculus |
Geometry |
---|---|---|---|---|---|---|
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student01 | Languages | male | 80 | 70 | 75 | 80 |
Student02 | Mathematics | male | 90 | 88 | 100 | 90 |
Student03 | Languages | female | 85 | 95 | 80 | 85 |
Student04 | Languages | male | 60 | 55 | 100 | 100 |
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student05 | Languages | female | 68 | 80 | 95 | 80 |
Student06 | Mathematics | male | 100 | 99 | 100 | 90 |
Student07 | Mathematics | male | 85 | 68 | 90 | 90 |
Student08 | Languages | male | 100 | 90 | 90 | 85 |
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student09 | Mathematics | male | 80 | 50 | 65 | 75 |
Student10 | Languages | male | 85 | 100 | 100 | 90 |
Student11 | Languages | male | 86 | 85 | 100 | 100 |
Student12 | Mathematics | female | 100 | 75 | 70 | 85 |
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student13 | Languages | female | 100 | 80 | 100 | 90 |
Student14 | Languages | female | 50 | 45 | 55 | 90 |
Student15 | Languages | male | 95 | 35 | 100 | 90 |
Student16 | Languages | female | 100 | 50 | 30 | 70 |
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student17 | Languages | female | 80 | 100 | 55 | 65 |
Student18 | Mathematics | male | 30 | 49 | 55 | 75 |
Student19 | Languages | male | 68 | 90 | 88 | 70 |
Student20 | Mathematics | male | 40 | 45 | 40 | 80 |
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student21 | Languages | male | 50 | 45 | 100 | 100 |
Student22 | Mathematics | male | 100 | 99 | 100 | 90 |
Student23 | Languages | female | 85 | 80 | 80 | 80 |
Student24 | Languages | female | 100 | 91 | 13 | 82 |
Javascript
Add Widget Template
// addWidget Template // ******************* $.tablesorter.addWidget({ id: 'myWidget', // The init function (added in v2.0.28) is called only after tablesorter has // initialized, but before initial sort & before any of the widgets are applied. init: function(table, allWidgets, thisWidget){ // 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, true); }, format: function(table, 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 * } });
Repeat Headers Widget Code
$(function() { // add new widget called repeatHeaders // ************************************ $.tablesorter.addWidget({ // give the widget an id id: "repeatHeaders", // format is called when the on init and when a sorting has finished format: function(table) { var h, i, skip; // cache and collect all TH headers if (!this.headers) { h = this.headers = []; $("thead th",table).each(function() { h.push( "<th>" + $(this).text() + "</th>" ); }); } // remove appended headers by classname $(table).find("tr.repeated-header").remove(); // number of rows to skip skip = 4; // loop all tr elements and insert a copy of the "headers" for (i = skip; i < table.tBodies[0].rows.length; i += (skip + 1)) { // insert a copy of the table head every X rows $("tbody tr:eq(" + i + ")",table).before( // "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 $("<tr></tr>").addClass("repeated-header remove-me").html(this.headers.join("")) ); } }, // 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, wo){ $(table).find("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'] }); });