Sorting HTML Tables using Javascript:
I'm already demonstrated how to use HTML tables on the client for a very simple client-side paging solution.
I've heard from several people who point out the performance problems with large sets of data.
I agree. This solution is best for a fairly fixed amount of data.
In this post I've add the sorting function in that same table so now the sorting and paging available in same table
Here just put a class name "sort" to the table tag
For example:
<table id="tablepaging" class="sap sort" align="center" >
Incase if you want to remove sorting for a particular column in a table
just put a class name "unsort" to the corresponding header tag
For example:
<th> class="unsort">Geometry </th>
Online Demo:
Name | Major | English | Tamil | Calculus | Geometry |
---|---|---|---|---|---|
Student01 | Languages | 80 | 70 | 75 | 80 |
Student02 | Mathematics | 90 | 88 | 100 | 90 |
Student03 | Languages | 40 | 40 | 35 | 60 |
Student04 | Mathematics | 50 | 68 | 100 | 70 |
Student05 | Languages | 45 | 45 | 65 | 75 |
Student06 | Mathematics | 75 | 65 | 50 | 55 |
Student07 | Mathematics | 85 | 68 | 90 | 90 |
Student08 | Languages | 100 | 90 | 90 | 85 |
Student09 | Mathematics | 80 | 50 | 65 | 75 |
Student10 | Languages | 85 | 100 | 100 | 90 |
Student11 | Languages | 86 | 85 | 100 | 100 |
Student12 | Mathematics | 100 | 75 | 70 | 85 |
Student13 | Languages | 100 | 80 | 100 | 90 |
Student14 | Languages | 50 | 45 | 55 | 90 |
Student15 | Languages | 95 | 35 | 100 | 90 |
Student16 | Languages | 100 | 50 | 30 | 70 |
Student17 | Languages | 80 | 100 | 55 | 65 |
Student18 | Mathematics | 30 | 49 | 55 | 75 |
Student19 | Languages | 68 | 90 | 88 | 70 |
Student20 | Mathematics | 40 | 45 | 40 | 80 |
Student21 | Languages | 50 | 45 | 100 | 100 |
Student22 | Mathematics | 100 | 99 | 100 | 90 |
Student23 | Languages | 85 | 80 | 80 | 80 |
student24 | Languages | 100 | 91 | 13 | 82 |
0 comments
Post a Comment