Table Sorting
Source: http://www.datatables.net/
Styling: http://www.datatables.net/manual/styling/
Customisation: http://www.datatables.net/reference/option/
Example
Select a column heading to sort table.
| Column 1 | Column 2 | Column 3 | Column 5 |
|---|---|---|---|
| Row 1 Data 1 | Row 1 Data 2 | Row 1 Data 3 | Row 1 Data 4 |
| Row 2 Data 1 | Row 2 Data 2 | Row 2 Data 3 | Row 2 Data 4 |
| Row 3 Data 1 | Row 3 Data 2 | Row 3 Data 3 | Row 3 Data 4 |
| Row 4 Data 1 | Row 4 Data 2 | Row 4 Data 3 | Row 4 Data 4 |
Implementation
For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
Scripts & CSS
Metadata Schema
In the FOOTER SCRIPTS area of the Metadata Schema
<!-- jQuery DataTables -->
<script type="text/javascript" src="%globals_asset_url:945073%"></script>
<!-- Table Sort script -->
<script type="text/javascript" src="%globals_asset_url:934904%"></script>
<!-- Table Sort Customisation -->
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
In the Custom CSS area of the Metadata Schema
<!--Table Sort CSS --> <link href="%globals_asset_url:954200%" rel="stylesheet" type="text/css" />
Other CSS already available in the CMS:
<!--Table Sort CSS --> <link href="%globals_asset_url:249742%" rel="stylesheet" type="text/css" />