If you want a table to be sortable use $([tablename]).tablesort()
Download This Plugin
Example:
$(function () { $('.table-sort').tablesort(); });
To make a column sortable, add the class 'table-sort' to it's <th> tag. Or else it won't be sorted, like the Phone Number column.
Example:
<th class="table-sort">First Name</th>
First Name | Last Name | Phone Number | |
---|---|---|---|
John | Smith | [email protected] | (613) 873-2982 |
Sean | MacIsaac | [email protected] | (613) 871-6191 |
Tim | Zarby | [email protected] | (613) 743-5389 |
Andrew | Nichols | [email protected] | (613) 741-3384 |
Ally | O'Neil | [email protected] | (613) 642-9831 |
To make a table searchable, add the class 'table-sort-search' to the <table> tag.
Example:
<table class="table-sort table-sort-search"></table>
First Name | Last Name | Phone Number | |
---|---|---|---|
John | Smith | [email protected] | (613) 873-2982 |
Sean | MacIsaac | [email protected] | (613) 871-6191 |
Tim | Zarby | [email protected] | (613) 743-5389 |
Andrew | Nichols | [email protected] | (613) 741-3384 |
Ally | O'Neil | [email protected] | (613) 642-9831 |
To make the search text input show the search match count, add the class 'table-sort-show-search-count' to the <table> tag.
Example
<table class="table-sort table-sort-search table-sort-show-search-count"></table>
First Name | Last Name | Phone Number | |
---|---|---|---|
John | Smith | [email protected] | (613) 873-2982 |
Sean | MacIsaac | [email protected] | (613) 871-6191 |
Tim | Zarby | [email protected] | (613) 743-5389 |
Andrew | Nichols | [email protected] | (613) 741-3384 |
Ally | O'Neil | [email protected] | (613) 642-9831 |