State Persistence
State Persistence
Step1: Include JS / CSS files required to have this feature. Make sure you include JS files after jQuery JS inclusion.
<!-- library for persistance storage -->
<script src="//cdn.jsdelivr.net/jstorage/0.1/jstorage.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/json2/0.1/json2.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/gh/gridphp/jqGridState@10b365046ebd687914855e807eb5f769277317d5/jqGrid.state.js" type="text/javascript"></script>
Step2: Before displaying grid echo $out, set persistence options in script tag:
<script>
var opts_list1 = {
"stateOptions": {
storageKey: "gridState-list1",
columns: true, // remember column chooser settings
selection: true, // row selection
expansion: true, // subgrid expansion
filters: true, // filters
pager: true, // page number
order: true // field ordering
}
};
</script>
- Set true/false setting in JS object you want to keep persistence on page reload.
- If you have single grid on page,
var opts
will also work. However it's better to usevar opts_<gridid>
- Option
storageKey
should be unique for each grid, otherwise settings will mix-up. - It uses client side browser storage. To persist on server, refer demo code below.
Resources
- Sample Code
- See Live Demo
- You can check this demo in archive
demos/misc/persist-settings.php