Product Spotlight

Table Sorting, Paging and Filtering with jQuery Demo

The two tables below demostrate sorting, paging and filtering. The first table doesn't reset the pager when sorted (default) and the second does. Which one should I use? Let me know in the poll at the bottom of the page.

Table One without Paging Reset on Sort

  • Click the next button on the pager to go to a page other than the first.
  • Now click one of the headers to sort and notice that the pager does not reset and there is sorted data before and possibly after the current page.
Students Search: Clear Filter Image
Name Major Sex English Japanese Calculus Geometry
Student01 Languages M 80 70 75 80
Student02 Mathematics M 90 88 100 90
Student03 Languages F 85 95 80 85
Student04 Languages M 60 55 100 100
Student05 Languages F 68 80 95 80
Student06 Mathematics M 100 99 100 90
Student07 Mathematics M 85 68 90 90
Student08 Languages M 100 90 90 85
Student09 Mathematics M 80 50 65 75
Student10 Languages M 85 100 100 90
Student11 Languages M 86 85 100 100
Student12 Mathematics F 100 75 70 85
Student13 Languages F 100 80 100 90
Student14 Languages F 50 45 55 90
Student15 Languages M 95 35 100 90
Student16 Languages F 100 50 30 70
Student17 Languages F 80 100 55 65
Student18 Mathematics M 30 49 55 75
Student19 Languages M 68 90 88 70
Student20 Mathematics M 40 45 40 80
Student21 Languages M 50 45 100 100
Student22 Mathematics M 100 99 100 90
Student23 Languages F 85 80 80 80
student23 Mathematics M 82 77 0 79
student24 Languages F 100 91 13 82
student25 Mathematics M 22 96 82 53

Table Two with Paging Reset on Sort

  • Click the next button on the pager to go to a page other than the first.
  • Now click one of the headers to sort and notice that the pager resets to the first page.
Students Search: Clear Filter Image
Name Major Sex English Japanese Calculus Geometry
Student01 Languages M 80 70 75 80
Student02 Mathematics M 90 88 100 90
Student03 Languages F 85 95 80 85
Student04 Languages M 60 55 100 100
Student05 Languages F 68 80 95 80
Student06 Mathematics M 100 99 100 90
Student07 Mathematics M 85 68 90 90
Student08 Languages M 100 90 90 85
Student09 Mathematics M 80 50 65 75
Student10 Languages M 85 100 100 90
Student11 Languages M 86 85 100 100
Student12 Mathematics F 100 75 70 85
Student13 Languages F 100 80 100 90
Student14 Languages F 50 45 55 90
Student15 Languages M 95 35 100 90
Student16 Languages F 100 50 30 70
Student17 Languages F 80 100 55 65
Student18 Mathematics M 30 49 55 75
Student19 Languages M 68 90 88 70
Student20 Mathematics M 40 45 40 80
Student21 Languages M 50 45 100 100
Student22 Mathematics M 100 99 100 90
Student23 Languages F 85 80 80 80
student23 Mathematics M 82 77 0 79
student24 Languages F 100 91 13 82
student25 Mathematics M 22 96 82 53

Poll Powered By JS-Kit

Demo Gallery