Pagination not retained after loading data first time

rdatatable

On clicking search button below table is refreshed and data is fetched. Below is the sequence of steps done to search and load data in table.

STEPS to Reproduce ISSUE

1. Click search
2. clear cache to reset pagination back to page 1. This is done as follows
   window.localStorage.clear();

FYI: I tried localStorage.removeItem("claimListDataTable"); But was not successful in resetting pagination.

1. The table data is refreshed with new data.

ISSUE:::

The issue i am facing now is after table is refreshed with new data, i navigate to page 2 in table search results and select an item.
This takes me to different page. On clicking back to return to table the pagination is on page 1 and not on page 2 where i was before navigating away from table. Subsequent pagination history is retained correctly. The pagination is lost the first time after data is loaded.

Could someone explain why i am seeing this behavior and suggest ways to fix this problem?

$("#claimListTable").dataTable( {
        "aLengthMenu": [[10, 25, 50], [10, 25, 50]],
        "bProcessing": true,
        "bServerSide": true,
        "bSort" : false,
        "sort": "position",
        "bStateSave": false,
        "iDisplayLength": 10,
        "iDisplayStart": 0,
        "bFilter": false,
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            sessionStorage.setItem('claimListDataTable', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(sessionStorage.getItem('claimListDataTable'));
        }, 
       // "bInfo": false,
        "fnDrawCallback": function () {
        },         
        "sAjaxSource": "retreiveClaimsList",
        "fnServerParams": function ( aoData ) {
            aoData.push({ "name": "audit_id", "value": audit_id });
            aoData.push({ "name": "provider_nm", "value": provider_nm });
            aoData.push({ "name": "selProvider", "value": selProvider });
            aoData.push({ "name": "batch_num", "value": batch_num });
            aoData.push({ "name": "selStatus", "value": selStatus });
            aoData.push({ "name": "reasonCd", "value": reasonCd });
            aoData.push({ "name": "recipientId", "value": recipientId });
            aoData.push({ "name": "recipient_firstName", "value": recipient_firstName });
            aoData.push({ "name": "recipient_lastName", "value": recipient_lastName });
            aoData.push({ "name": "selOpType", "value": selOpType });
            aoData.push({ "name": "op_from_dos", "value": op_from_dos }); 
            aoData.push({ "name": "op_thru_dos", "value": op_thru_dos });
        },
        "aoColumns": [
                
                {"mData" : "auditStatusCd"}, 
                {"mData" : "batchNum"}, 
                {"mData" : "overpaymentType"}, 
                {"mData" : "patientLastName"}, 
                {"mData" : "patientFirstName"},
                {"mData" : "recipientId"}, 
                {"mData" : "fromDOSDate"}, 
                {"mData" : "thruDOSDate"},
                {"mData" : "paidDate"}, 
                {"mData" : "icnNumber"},
                {"mData":   null,
                "mRender": function ( data, type, row ) {
                    if ( type === 'display' ) {
                        var opAmt = formatNumber(row.finalAmt);
                       return '<p align="right">'+opAmt+'</p>';
                    }
                    return data;
                },
                className: "dt-body-center",
                
                },
                {"mData" : "claimType"},
                {"mData":   null,
                    "mRender": function ( data, type, row ) {
                        if ( type === 'display' ) {
                           return '<a href="#" onclick="goToLineDetail('+'\''+row.recipientId+'\',\''+row.fromDOSDate+'\',\''+row.thruDOSDate+'\',\''+row.overpaymentType+'\',\''+row.batchNum+'\',\''+row.icnNumber+'\',\''+row.providerId+'\''+')">Details</a>';
                        }
                        return data;
                    },
                    className: "dt-body-center",
                    
                },

        ]
    } );

tangerine

On clicking back to return to table...

Do you mean "clicking the browser's 'back' button"?

rdatatable

No I am not using browser back button. I have a back button in my application