How to JQ Grid Session Maintain Search Filters and pagination

 JQ grid How to Search sorting Maintenance

jq grid search ,sorting ,filter and page column chooser Maintain the browser cookies below code only copy  past and reference added the

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript" src="ui.multiselect.js"></script>
	<script type="text/javascript" src="grid.locale-en.js"></script>
	<script type="text/javascript" src="jquery.jqGrid.src-multiselect.js"></script>
	<script type="text/javascript" src="jqGrid/json2.js"></script>

<script type="text/javascript">
	//<![CDATA[
	$.jgrid.formatter.integer.thousandsSeparator = ',';
	$.jgrid.formatter.number.thousandsSeparator = ',';
	$.jgrid.formatter.currency.thousandsSeparator = ',';
	$(document).ready(function () {
	'use strict';
	var myData = [
	{id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
	{id: "2", invdate: "2011-07-30", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
	{id: "3", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: true, ship_via: "FE", total: "320.00"},
	{id: "4", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00"},
	{id: "5", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00"}
	],
	$grid = $("#list"),
	initDateSearch = function (elem) {
	setTimeout(function () {
	$(elem).datepicker({
	dateFormat: 'dd-M-yy',
	autoSize: true,
	//showOn: 'button', // it dosn't work in searching dialog
	changeYear: true,
	changeMonth: true,
	showButtonPanel: true,
	showWeek: true,
	onSelect: function () {
	if (this.id.substr(0, 3) === "gs_") {
	setTimeout(function () {
	$grid[0].triggerToolbar();
	}, 50);
	} else {
	// to refresh the filter
	$(this).trigger('change');
	}
	}
	});
	}, 100);
	},
	numberSearchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'],
	numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number',
	searchoptions: { sopt: numberSearchOptions }},
	myDefaultSearch = 'cn',
	getColumnIndex = function (grid, columnIndex) {
	var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
	for (i = 0; i < l; i++) {
	if ((cm[i].index || cm[i].name) === columnIndex) {
	return i; // return the colModel index
	}
	}
	return -1;
	},
	refreshSerchingToolbar = function ($grid, myDefaultSearch) {
	var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l,
	rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'),
	cmi, control, tagName;
	for (i = 0, l = cm.length; i < l; i++) {
	control = $("#gs_" + $.jgrid.jqID(cm[i].name));
	if (control.length > 0) {
	tagName = control[0].tagName.toUpperCase();
	if (tagName === "SELECT") { // && cmi.stype === "select"
	control.find("option[value='']")
	.attr('selected', 'selected');
	} else if (tagName === "INPUT") {
	control.val('');
	}
	}
	}
	if (typeof (postData.filters) === "string" &&
	typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) {
	filters = $.parseJSON(postData.filters);
	if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
	// only in case of advance searching without grouping we import filters in the
	// searching toolbar
	rules = filters.rules;
	for (i = 0, l = rules.length; i < l; i++) {
	rule = rules[i];
	iCol = getColumnIndex($grid, rule.field);
	if (iCol >= 0) {
	cmi = cm[iCol];
	control = $("#gs_" + $.jgrid.jqID(cmi.name));
	if (control.length > 0 &&
	(((typeof (cmi.searchoptions) === "undefined" ||
	typeof (cmi.searchoptions.sopt) === "undefined")
	&& rule.op === myDefaultSearch) ||
	(typeof (cmi.searchoptions) === "object" &&
	$.isArray(cmi.searchoptions.sopt) &&
	cmi.searchoptions.sopt.length > 0 &&
	cmi.searchoptions.sopt[0] === rule.op))) {
	tagName = control[0].tagName.toUpperCase();
	if (tagName === "SELECT") { // && cmi.stype === "select"
	control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
	.attr('selected', 'selected');
	} else if (tagName === "INPUT") {
	control.val(rule.data);
	}
	}
	}
	}
	}
	}
	},
	cm = [
	//{name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', formatter: 'int'},
	{name: 'invdate', index: 'invdate', width: 75, align: 'center', sorttype: 'date',
	formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y',
	searchoptions: {
	sopt: ['eq', 'ne'],
	dataInit: initDateSearch
	}},
	{name: 'name', index: 'name', width: 65},
	{name: 'amount', index: 'amount', width: 75, template: numberTemplate},
	{name: 'tax', index: 'tax', width: 52, template: numberTemplate},
	{name: 'total', index: 'total', width: 60, search: false, template: numberTemplate},
	{name: 'closed', index: 'closed', width: 67, align: 'center', formatter: 'checkbox',
	edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'},
	stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }},
	{name: 'ship_via', index: 'ship_via', width: 95, align: 'center', formatter: 'select',
	edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'},
	stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:Intim'}},
	{name: 'note', index: 'note', width: 60, sortable: false}
	],
	saveObjectInLocalStorage = function (storageItemName, object) {
	if (typeof window.localStorage !== 'undefined') {
	window.localStorage.setItem(storageItemName, JSON.stringify(object));
	}
	},
	removeObjectFromLocalStorage = function (storageItemName) {
	if (typeof window.localStorage !== 'undefined') {
	window.localStorage.removeItem(storageItemName);
	}
	},
	getObjectFromLocalStorage = function (storageItemName) {
	if (typeof window.localStorage !== 'undefined') {
	return JSON.parse(window.localStorage.getItem(storageItemName));
	}
	},
	myColumnStateName = function (grid) {
	return window.location.pathname + '#' + grid[0].id;
	},
	idsOfSelectedRows = [],
	saveColumnState = function (perm) {
	var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName,
	postData = this.jqGrid('getGridParam', 'postData'),
	columnsState = {
	search: this.jqGrid('getGridParam', 'search'),
	page: this.jqGrid('getGridParam', 'page'),
	rowNum: this.jqGrid('getGridParam', 'rowNum'),
	sortname: this.jqGrid('getGridParam', 'sortname'),
	sortorder: this.jqGrid('getGridParam', 'sortorder'),
	permutation: perm,
	selectedRows: idsOfSelectedRows,
	colStates: {}
	},
	colStates = columnsState.colStates;
	if (typeof (postData.filters) !== 'undefined') {
	columnsState.filters = postData.filters;
	}
	for (i = 0; i < l; i++) {
	colItem = colModel[i];
	cmName = colItem.name;
	if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
	colStates[cmName] = {
	width: colItem.width,
	hidden: colItem.hidden
	};
	}
	}
	saveObjectInLocalStorage(myColumnStateName(this), columnsState);
	},
	myColumnsState,
	isColState,
	restoreColumnState = function (colModel) {
	var colItem, i, l = colModel.length, colStates, cmName,
	columnsState = getObjectFromLocalStorage(myColumnStateName(this));
	if (columnsState) {
	colStates = columnsState.colStates;
	for (i = 0; i < l; i++) {
	colItem = colModel[i];
	cmName = colItem.name;
	if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
	colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
	}
	}
	}
	return columnsState;
	},
	updateIdsOfSelectedRows = function (id, isSelected) {
	var index = $.inArray(id, idsOfSelectedRows);
	if (!isSelected && index >= 0) {
	idsOfSelectedRows.splice(index, 1); // remove id from the list
	} else if (index < 0) {
	idsOfSelectedRows.push(id);
	}
	},
	firstLoad = true;
	myColumnsState = restoreColumnState.call($grid, cm);
	isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
	idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ? myColumnsState.selectedRows : [];
	$grid.jqGrid({
	datatype: 'local',
	data: myData,
	colNames: [/*'Inv No',*/'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
	colModel: cm,
	rowNum: isColState ? myColumnsState.rowNum : 10,
	rowList: [5, 10, 20],
	pager: '#pager',
	gridview: true,
	page: isColState ? myColumnsState.page : 1,
	search: isColState ? myColumnsState.search : false,
	postData: isColState ? { filters: myColumnsState.filters } : {},
	sortname: isColState ? myColumnsState.sortname : 'invdate',
	sortorder: isColState ? myColumnsState.sortorder : 'desc',
	rownumbers: true,
	ignoreCase: true,
	multiselect: true,
	//shrinkToFit: false,
	//viewrecords: true,
	caption: 'The usage of localStorage to save jqGrid preferences',
	height: 'auto',
	onSelectRow: function (id, isSelected) {
	updateIdsOfSelectedRows(id, isSelected);
	saveColumnState.call($grid, $grid[0].p.remapColumns);
	},
	onSelectAll: function (aRowids, isSelected) {
	var i, count, id;
	for (i = 0, count = aRowids.length; i < count; i++) {
	id = aRowids[i];
	updateIdsOfSelectedRows(id, isSelected);
	}
	saveColumnState.call($grid, $grid[0].p.remapColumns);
	},
	loadComplete: function () {
	var $this = $(this), i, count;
	if (firstLoad) {
	firstLoad = false;
	if (isColState) {
	$this.jqGrid("remapColumns", myColumnsState.permutation, true);
	}
	if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) {
	// create toolbar if needed
	$this.jqGrid('filterToolbar',
	{stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
	}
	}
	refreshSerchingToolbar($this, myDefaultSearch);
	for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
	$this.jqGrid('setSelection', idsOfSelectedRows[i], false);
	}
	saveColumnState.call($this, this.p.remapColumns);
	},
	resizeStop: function () {
	saveColumnState.call($grid, $grid[0].p.remapColumns);
	}
	});
	$.extend($.jgrid.search, {
	multipleSearch: true,
	multipleGroup: true,
	recreateFilter: true,
	closeOnEscape: true,
	closeAfterSearch: true,
	overlay: 0
	});
	$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false});
	$grid.jqGrid('navButtonAdd', '#pager', {
	caption: "",
	buttonicon: "ui-icon-calculator",
	title: "Choose columns",
	onClickButton: function () {
	$(this).jqGrid('columnChooser', {
	done: function (perm) {
	if (perm) {
	this.jqGrid("remapColumns", perm, true);
	saveColumnState.call(this, perm);
	}
	}
	});
	}
	});
	$grid.jqGrid('navButtonAdd', '#pager', {
	caption: "",
	buttonicon: "ui-icon-closethick",
	title: "Clear saved grid's settings",
	onClickButton: function () {
	removeObjectFromLocalStorage(myColumnStateName($(this)));
	window.location.reload();
	}
	});
	});
	//]]>
	</script>