{hero}

stateRestore.preDefined

Since: StateRestore 1.0.0

Set predefined states in DataTables initialisation.
Please note - this property requires the StateRestore extension for DataTables.

Description

This option allows StateRestore to load predefined states that are set in the DataTables initialisation. This object contains key-value pairs where the key is the identifier, and the value is the state that is to be reloaded. This can be retrieved from the DataTable at any time using the state() method.

As default the value is an empty object, meaning that there will be no predefined states loaded into StateRestore.

Take a look at this example to see this in action.

Type

object

Description:

This option is an object. The key is the identifier of the state, and the value is the state that is to be reloaded. This value can be retrieved from the DataTable at any time using the state() method.

The corresponding value of the predefined state is structured as follows.

  • number start - The first row that should be displayed.
  • number length - The number of rows that should be displayed per page.
  • array order - The ordering that should be applied to the table. This value is the same as that used in the order initialisation option.
  • object search - This is an object that contains details about the search. This value is the same as that used in the search initialision option.
  • array columns - This is an array of objects, one for each column. It has two properties.
    • columns.visible - This takes the same value as the initialisation option columns.visible, true for show and false for hide.
    • columns.search - This again this takes the same value as the columns.search initialisation option.
  • object scroller - This object contains four properties.
    • number baseRowTop - The distance that scroller has scrolled in terms of rows. For example 10.5 would set the top of the displayed table to be 10.5 rows from the top.
    • number topRow - This takes the same value as baseRowTop.
    • number baseScrollTop - The distance that scroller has scrolled in terms of pixels.
    • number scrollTop - This takes the same value as baseScrollTop.
  • object searchBuilder - This is the same value as is returned from searchBuilder.getDetails().
  • object searchPanes - This object contains the details necessary to rebuild SearchPanes as they were before. Not all of the following data is required to simply make selections within SearchPanes. To do this only the selectionList property is required.
    • array panes - This array contains an object for each pane that is displayed. These objects contains details that are required to reload the data and setup of each SearchPane.
      • array arrayFilter This is an array that contains an object for each option that is to be displayed within the SearchPane.
        • string display - This is the string value that is displayed within the SearchPane.
        • string filter - This is the string value that is used when filtering with/on the SearchPane.
        • string sort - This is the string value that is used when sorting on the SearchPane.
        • string type - This is the string value that is used when determining the type on the SearchPane.
      • object bins - This object has a key value pair for each distinct value within this panes column. The key is the distinct value and the value is the number of times that that value appears in the column.
      • boolean collapsed - Whether this pane was collapsed when the last state save occured, or not.
      • number id - The pane id, corresponding to the column index that it is attached to.
    • array selectionList - This array contains an object for each pane that is displayed. These objects contain details about the selections that have been made in each pane.
      • number column - The pane index that the selections are attached to.
      • array rows - This array contains the filter values that are to be selected.
  • object select - This object contains 3 properties which are required to make the selections which were present before.
    • array rows - This array contains all of the row ids corresponding to the rows that are to be selected. It is the same value as is returned from rows().ids().
    • array columns - This array contains the column indexes of the columns that are to be selected.
    • array cells - This array contains objects each with two properties. These properties indicate which cell should be selected.
      • string row - The row id of the cell that is to be selected.
      • number column - The column index of the cell that is to be selected.

Default

  • Value: {}

The default value for the stateRestore.preDefined option is {} meaning that as standard there are no predefined states.

Example

Set Predefined state for StateRestore:

$('#example').DataTable({
    dom: 'Blfrtip',
    buttons:[
        'createState',
        {
            extend: 'savedStates',
            config: {
                preDefined: {
                    "Order 3": {
                        "start": 0,
                        "length": 10,
                        "order": [[1,"asc"]],
                        "search": {
                            "search": "",
                            "smart": true,
                            "regex": false,
                            "caseInsensitive": true
                        },
                        "columns": [
                            {
                                "visible": true,
                                "search": {
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            },
                            {
                                "visible": true,
                                "search": {
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            },
                            {
                                "visible": true,
                                "search":{
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            },
                            {
                                "visible": true,
                                "search": {
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            },
                            {
                                "visible": true,
                                "search": {
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            },
                            {
                                "visible": true,
                                "search": {
                                    "search": "",
                                    "smart": true,
                                    "regex": false,
                                    "caseInsensitive": true
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
});