The sorting component allows you to quickly and easily sort all rows in a table using a specific column to determine the resulting order.
type
option being correctly set.The below lists all the options for the sorting component, these are available in addition to the core options.
Whether or not the component is enabled.
false
By default this component is disabled, no UI or features of this component will be available.
To supply this option through data attributes you must specify the attribute on the table
element.
<table data-sorting="true">
...
</table>
The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"sorting": {
"enabled": true
}
});
});
Whether or not the column can be sorted.
true
All columns can be sorted by default.
To supply this option through data attributes you must specify the attribute on the cell element.
<table>
<thead>
<tr>
<th data-sortable="false">...</th>
...
</tr>
</thead>
...
</table>
The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"columns": [{
"sortable": false
},{
...
}]
});
});
Whether or not the column is currently sorted.
false
When set to true
the component will sort by this column once initialized.
To supply this option through data attributes you must specify the attribute on the cell element.
<table>
<thead>
<tr>
<th data-sorted="true">...</th>
...
</tr>
</thead>
...
</table>
The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"columns": [{
"sorted": true
},{
...
}]
});
});
A string specifying the direction if the column is sorted.
When using the sorted
option this allows you to specify the direction the column is sorted.
This only supports two values; "ASC"
and "DESC"
.
"ASC"
The only other supported value for this option is "DESC"
.
To supply this option through data attributes you must specify the attribute on the cell element.
<table>
<thead>
<tr>
<th data-sorted="true" data-direction="DESC">...</th>
...
</tr>
</thead>
...
</table>
The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"columns": [{
"sorted": true,
"direction": "DESC"
},{
...
}]
});
});
The value used by the component to perform sorting operations.
""
To supply this option through data attributes you must specify the attribute on the td
element.
<table>
<tr>
<td data-sort-value="My Sort Value">...</td>
...
</tr>
...
</table>
The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"sortValue": "My Sort Value"
},
"value": ...
}
},{
...
}]
});
});
If no sort value is supplied for a cell the result of the cells default parse
method will be used.