Sortable and Searchable Data Tables
By clicking on the table header cell, users can sort the data as they wish. By default, the amount of rows shown is set to 25 and then people can either search, or click the 'next' link to go to the next lot of rows.
See demo: Basic sortable table | Sortable table - altered row display length (50 rows) - other options for data tables listed with this pattern.
Basic Sortable Table
| Sort me! | No, sort me! | SORT ME!.. please |
|---|---|---|
| Peter | Health | Yes |
| John | Sciences | No |
| Clark | Humanities and Social Sciences | Yes |
| Bruce | ECMS | No |
| Bruce | Professions | Yes |
| Bruce | Health | No |
| Peter | Humanities and Social Sciences | No |
| John | Sciences | Yes |
| Clark | Health | No |
| Bruce | Health | Yes |
| Bruce | Humanities and Social Sciences | No |
| Bruce | Professions | Yes |
| Peter | Sciences | Yes |
| John | Health | No |
| Clark | Health | No |
| Bruce | Sciences | Yes |
| Bruce | Humanities and Social Sciences | No |
| Bruce | Humanities and Social Sciences | Yes |
| Peter | Humanities and Social Sciences | No |
| John | Sciences | No |
| Clark | Sciences | Yes |
| Bruce | Professions | Yes |
| Bruce | Health | No |
| Bruce | Humanities and Social Sciences | No |
| Peter | Health | No |
| John | Health | No |
| Clark | Health | No |
| Bruce | Sciences | Yes |
| Bruce | Sciences | Yes |
| Bruce | Sciences | Yes |
Basic Sortable Table - Altered Row Display Length
| Sort me! | No, sort me! | SORT ME!.. please |
|---|---|---|
| Peter | Health | Yes |
| John | Sciences | No |
| Clark | Humanities and Social Sciences | Yes |
| Bruce | ECMS | No |
| Bruce | Professions | Yes |
| Bruce | Health | No |
| Peter | Humanities and Social Sciences | No |
| John | Sciences | Yes |
| Clark | Health | No |
| Bruce | Health | Yes |
| Bruce | Humanities and Social Sciences | No |
| Bruce | Professions | Yes |
| Peter | Sciences | Yes |
| John | Health | No |
| Clark | Health | No |
| Bruce | Sciences | Yes |
| Bruce | Humanities and Social Sciences | No |
| Bruce | Humanities and Social Sciences | Yes |
| Peter | Humanities and Social Sciences | No |
| John | Sciences | No |
| Clark | Sciences | Yes |
| Bruce | Professions | Yes |
| Bruce | Health | No |
| Bruce | Humanities and Social Sciences | No |
| Peter | Health | No |
| John | Health | No |
| Clark | Health | No |
| Bruce | Sciences | Yes |
| Bruce | Sciences | Yes |
| Bruce | Sciences | Yes |
Source Code
If you want to change the default value of rows shown, please copy the basic sortable table code and replace the top <table> tag with the following code:
<table class="light ui-widget-datatable" data-uoa-datatable-options='{"iDisplayLength":50}'>
If you want to sort a specific column by default, you can do the following:
<table class="light ui-widget-datatable" data-uoa-datatable-options='{"aaSorting": [[0, "desc"]]}'>
Where 0 represents the column to sort by, and desc or asc represents descending or ascending order.
