State

A simple state component for your table.

The state component allows for a better user experience by remembering which page the user is on, the currently sorted column and any search filters that have been applied. These values are persisted across browser sessions by using localStorage.

Note

See the showcase example to see this component in action. There is no UI so sort a column, change the page or apply a filter and then refresh the browser.

 Options

The below lists all the options for the state 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-state="true">
	...
</table>

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

jQuery(function($){
	$('.table').footable({
		"state": {
			"enabled": true
		}
	});
});
 

filtering boolean

Whether or not to store the state of the filtering component.

true

By default the filtering state is stored when the component is enabled.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-state-filtering="false">
	...
</table>

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

jQuery(function($){
	$('.table').footable({
		"state": {
			"filtering": false
		}
	});
});
 

paging boolean

Whether or not to store the state of the paging component.

true

By default the paging state is stored when the component is enabled.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-state-paging="false">
	...
</table>

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

jQuery(function($){
	$('.table').footable({
		"state": {
			"paging": false
		}
	});
});
 

sorting boolean

Whether or not to store the state of the sorting component.

true

By default the sorting state is stored when the component is enabled.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-state-sorting="false">
	...
</table>

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

jQuery(function($){
	$('.table').footable({
		"state": {
			"sorting": false
		}
	});
});
 

key string

The key used to store this tables state in localStorage.

null

The default of null means the plugin will generate a page and table specific identifier. By supplying a value you can persist state across different pages for the same table.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-state-key="YOUR_KEY">
	...
</table>

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

jQuery(function($){
	$('.table').footable({
		"state": {
			"key": "YOUR_KEY"
		}
	});
});

Notes

  • The generated key is created by using a hash of the current url combined with either the table ID, if it exists, or simply by a number assigned by the order the tables are initialized in.
  • If you have multiple tables per page using the state component I suggest adding an ID to each table to help make as unique a localStorage key as possible. It will work without it however by adding an ID you can ensure that you can rearrange the table initializations at a later date and any stored state will be retained. Without an ID the localStorage key is generated using a simple number which is incremented for each table that is initialized on a page. This means if you change the order the tables are initialized in any stored state will no longer match up and it would be lost.