web.bower_components.tablesorter.docs.example-widgets.html Maven / Gradle / Ivy

Go to download




	jQuery plugin: Tablesorter 2.0 - Writing custom widgets
	
	
	
	
	
	
	
	
	


	
	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

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