Retain selection on data reload

DataTables has the ability to use a property in the data source for each row as that row's unique identifier through the rowId option. This is typically used in DataTables to assign an id attribute to the tr elements in the table, but it can also be used by Select and other libraries to retain a unique identifier for each row over data reloads.

Select uses this information to be able to retain row selection over a data reload. Generally, if a table is reloaded, the state of each row is lost (since the old rows are deleted and new rows added), but this can be undesirable, particularly if performing frequent data updates. Setting the rowId option of DataTables will address this.

This example uses the extn property of the row as the rowId option (normally a database primary key might be used). A reload button is also available through the Buttons extension which will call the ajax.reload() method when activated.

To demonstrate Select's ability to retain the selected rows over a data reload, select a number of rows and then click the Reload table button.

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

var table = $('#example').DataTable({
	ajax: '../../../../examples/ajax/data/objects.txt',
	columns: [
		{ data: 'name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary' }
	],
	layout: {
		topStart: {
			buttons: [
				{
					text: 'Reload table',
					action: function () {
						table.ajax.reload();
					}
				}
			]
		}
	},
	rowId: 'extn',
	select: true
});

let table = new DataTable('#example', {
	ajax: '../../../../examples/ajax/data/objects.txt',
	columns: [
		{ data: 'name' },
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary' }
	],
	layout: {
		topStart: {
			buttons: [
				{
					text: 'Reload table',
					action: function () {
						table.ajax.reload();
					}
				}
			]
		}
	},
	rowId: 'extn',
	select: true
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Retain selection on data reload

Other examples

Checkbox

Initialisation

Styling

API

DataTables