HTML Table Filter Generator

This demo shows how to combine paging, columns' calculations and colmuns with different data types.

In this example, 2 date types are used and numeric data for currency columns is formated differently:

Use col_number_format property to set different numeric format ('EU' or 'US') in columns and col_date_type to set a date type by column.

		var totRowIndex = tf_Tag(tf_Id('demo'),"tr").length;	
		var props = {
			enable_default_theme: true,
			paging_length: 5,
			sort: true,
			filters_row_index: 1,
			alternate_rows: true,
			rows_counter: true,
			rows_counter_text: "Rows: ",
			btn_reset: true,
			btn_reset_text: "Clear",
			loader: true,
			loader_html: '',
			loader_css_class: 'myLoader',
			status_bar: false,
			col_number_format: [null,null,null,'EU','US',null,null,null],
			col_date_type: [null,null,null,null,null,null,'dmy','mdy'],
			rows_always_visible:[totRowIndex],
			col_operation: {
				id: ["sum1","sum2",'mean1','mean2'],  
				col: [3,4,3,4],  
				operation: ["sum","sum",'mean','mean'],  
				write_method: ["innerhtml",'innerhtml',"innerhtml",'innerhtml'],  
				exclude_row: [totRowIndex, (totRowIndex+1)],  
				decimal_precision: [2,2,2,2],
				tot_row_index: [totRowIndex]
			  },
			on_after_operation: formatTotals,
			on_filters_loaded: function(o){
				//Paging is enabled only once filters are generated 
				o.paging = true;
				//last row with totals needs to be substracted for pages calculation adjustment
				o.nbRows = (o.nbRows-2); 
				o.isFirstLoad = true; //this property needs to be true paging generation
				o.SetPaging();
				o.SetAlternateRows(); //alternating rows backgrounds needs to be re-set
				o.isFirstLoad = false;		
			}
		}
		var tf = setFilterGrid("demo",props);
Email Id Phone € US $ Url EU Date US Date
Tot          
Mean          
devo@flexomat.com 66672 941-964-8535
2.482,79
2,482.79
 http://gmail.com 14/12/1988 12/14/1988
henry@mountdev.net 35889 941-964-9543
2.776,09
2,776.09
 http://www.gmail.com 19/1/1984 1/19/1984
christian@reno.gov 60021 941-964-5617
2.743,41
2,743.41
 http://www.dotnet.ca 25/3/2000 3/25/2000
muffins@donuts.com 17927 941-964-9511
2.998,18
2,998.18
 http://google.se 24/1/1993 1/24/1993
muffins@reno.gov 76375 941-964-2757
1.836,09
1,836.09
 http://www.samba.org 4/4/1988 4/4/1988
mendez@gmail.com 45834 941-964-2575
2.805,46
2,805.46
 http://flexomat.com 12/12/1985 12/12/1985
dev@gmail.com 20022 941-964-4967
3.296,54
3,296.54
 http://www.flexomat.com 3/7/2002 7/3/2002
foo@polyester.se 55987 941-964-745
2.953,73
2,953.73
 http://www.donuts.com 4/8/1987 8/4/1987
adam@aftonbladet.se 38867 941-964-6302
1.949,27
1,949.27
 http://flexomat.com 27/7/1995 7/27/1995
devo@donuts.com 51426 941-964-1234
1.067,00
1,067.00
 http://www.polyester.se 5/1/1986 1/5/1986
henry@samba.org 40859 941-964-4856
3.401,19
3,401.19
 http://www.flexomat.com 7/3/1990 3/7/1990
found@dotnet.ca 23986 941-964-2686
1.393,52
1,393.52
 http://lostnfound.org 22/7/1993 7/22/1993
carl@fish.org 73392 941-964-5792
3.876,04
3,876.04
 http://www.google.se 14/7/1984 7/14/1984
found@mountdev.net 03519 941-964-1599
1.176,48
1,176.48
 http://donuts.com 6/8/2000 8/6/2000
lost@fish.org 36628 941-964-5985
822,23
822.23
 http://www.gmail.com 14/7/1994 7/14/1994
mendez@dotnet.ca 90442 941-964-1649
1.985,72
1,975.72
 http://reno.gov 20/10/1997 10/20/1997
carl@donuts.com 00412 941-964-6432
1.834,77
1,834.77
 http://gmail.com 23/8/1997 8/23/1997
foo@fish.org 80653 941-964-1022
260,26
260.26
 http://samba.org 24/11/1991 11/24/1991
found@fish.org 54635 941-964-6439
1.442,80
1,442.80
 http://dotnet.ca 12/7/1987 7/12/1987
found@flexomat.com 20953 941-964-5544
575,42
575.42
 http://gmail.com 10/6/1988 6/10/1988