Sorting

Sort rows by columns.

The sorting component allows you to quickly and easily sort all rows in a table using a specific column to determine the resulting order.

Notes

 Options

The below lists all the options for the sorting component, these are available in addition to the core options.

General options

 

enabled boolean

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
		}
	});
});

Column options

 

sortValue function

The function used to retrieve the sort value for a cell.

To improve the performance of the component all cells provide a value to be used during sorting operations.

null

By default the column will use its types sortValue function.

*

To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.

function mySortValue(valueOrElement){
	if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data('sortValue') || this.parser(valueOrElement);
	if (FooTable.is.hash(valueOrElement) && FooTable.is.hash(valueOrElement.options)){
		if (FooTable.is.string(valueOrElement.options.sortValue)) return valueOrElement.options.sortValue;
		if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
	}
	if (FooTable.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement;
	return null;
}
<table>
	<thead>
		<tr>
			<th data-sort-value="mySortValue">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"sortValue": function(valueOrElement){
				if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data('sortValue') || this.parser(valueOrElement);
				if (FooTable.is.hash(valueOrElement) && FooTable.is.hash(valueOrElement.options)){
					if (FooTable.is.string(valueOrElement.options.sortValue)) return valueOrElement.options.sortValue;
					if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
				}
				if (FooTable.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement;
				return null;
			}
		},{
			...
		}]
	});
});

Note

The first argument (valueOrElement) is either the td element, the jQuery wrapper around the td element or a value that needs to be parsed.

 

sortable boolean

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
		},{
			...
		}]
	});
});
 

sorted boolean

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
		},{
			...
		}]
	});
});
 

direction string

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"
		},{
			...
		}]
	});
});

Cell options

 

sortValue *

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": ...
			}
		},{
			...
		}]
	});
});

Note

If no sort value is supplied for a cell the result of the cells default parse method will be used.