# tablesorter

## Writing custom widgets

### Flexible client-side table sorting

Back to documentation

# Javascript

    // add new widget called repeatHeaders
    $.tablesorter.addWidget({
    	// give the widget a id
    	id: "repeatHeaders",
    	// format is called when the on init and when a sorting has finished
    	format: function(table) {
    		// cache and collect all TH headers
    		if(!this.headers) {
    			var h = this.headers = [];
    			$("thead th",table).each(function() {
    				h.push(
    					"" + $(this).text() + ""
    				);

    			});
    		}

    		// remove appended headers by classname.
    		$("tr.repated-header",table).remove();

    		// loop all tr elements and insert a copy of the "headers"
    		for(var i=0; i < table.tBodies[0].rows.length; i++) {
    			// insert a copy of the table head every 10th row
    			if((i%5) == 4) {
    				$("tbody tr:eq(" + i + ")",table).before(
    					$("").html(this.headers.join(""))

    				);
    			}
    		}
    	}
    });

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

# 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
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
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
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
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
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80