xlsTableFilter 1.0 Demo

Excel style filters on a table. To filter on a column, click the column header.

View Code

Example 1. Basic Table Filter

A simple filter, case insensitive, using build in checkboxes. 



<script type="text/javascript">

<!--

$(function() {

	$("#example1").xlsTableFilter();

});

//-->

</script>
Name Major Gender English French Calculus Geometry
Student01 Languages male 80 70 75 80
Student02 Mathematics male 90 88 100 90
Student03 Languages female 85 95 80 85
Student04 Fine Arts male 60 55 100 100
Student05 Languages female 68 80 95 80
Student06 Mathematics male 100 99 100 90
Student07 Fine Arts 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
View Code

Example 2. Custom Checkbox Table Filter

A filter, case insensitive, using styled checkboxes. 



<script type="text/javascript">

<!--

$(function() {

	$("#example2").xlsTableFilter({

		checkStyle: "custom"

	});

});

//-->

</script>
Name Major Gender English French 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
View Code

Example 3. Table Filter with Displayed Rows

A filter, case insensitive, using styled checkboxes and printing the number of rows displayed. 



<script type="text/javascript">

<!--

$(function() {

	$("#example3").xlsTableFilter({

		checkStyle: "custom",

		rowsDisplay: "divRowsDisplay"

	});

});

//-->

</script>
Name Major Gender English French 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