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 |
| Loading... | |||||
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(document).ready(function() { var table = $('#example').DataTable( { ajax: '../../../../examples/ajax/data/objects.txt', deferRender: true, columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], rowId: 'extn', select: true, dom: 'Bfrtip', buttons: [ { text: 'Reload table', action: function () { table.ajax.reload(); } } ] } );} ); |
In addition to the above code, the following Javascript library files are loaded for use in this example: