Update _iDisplayStart after server side reload problem

n2lose

Hi,

I have created an DataTable (1.10.16) using server side and then go the last page, click on a link on table to open new tab, before open new tab I added an parameter to Cookie to save the currentPage.
On the new page, i would like to click on a button to back to the last page and last table page that was viewing.
So, after back to last page, I call init DataTable as normal, but on initComplete(oSettings), i check if there is currentPage in Cookie, i need to go to that page after init data table.

if(currentPage) {
        oSettings._iDisplayStart = currentPage;
        $(oSettings.oInstance).trigger('page', oSettings);
        oSettings.oApi._fnDraw(oSettings);
}

So, it works fine if the currentPage is not the last datatable page.
Example: when i have 10 pages, it works fine if currentPage from 1-9, but if currentPage = 10, it always back to page 9.
Could someone have an issue with it?

colin

Hi @n2lose ,

It sounds like enabling stateSave will do it for you. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

n2lose

Hi @colin ,

Thanks for you answer. I have just check quickly stateSave, yes it sounds like enable stateSave option, but i am storing filters in the cookie instead.
Here is the link test tht you can reproduce my issue.

Thanks

colin

Hi @n2lose ,

Yep, you're modifying the settings, as it says in DataTables.Settings this is considered private. Also, by the time initComplete is called, the table would've been drawn so you'll see a flicker.

The best bet would be to use stateSave as I suggested. But if not, modify the data sent in the initial Ajax request. This here is doing something similar with custom variables, you'll need to modify the values that'll be passed in to change the start location.

Cheers,

Colin

n2lose

Hi @colin ,

Yes, stateSave is great.
If I have 10 pages and the last page has one row, then I make an action to update data, so now the data table has just 9 rows, when back to last save states, it shows no data available.
Can I use the stateLoadCallback or something else to check and update state before back?

Thanks,
Lam

colin

Hi @n2lose ,

I'm surprised it shows no data, it should reset to the first page if any of the conditions are no longer valid. But yep, you can do exactly that - not with stateLoadCallback as that defines where the data is stored, but with stateLoadParams which allows the saved data to be manipulated.

Cheers,

Colin

n2lose

Hi @colin ,

About stateLoadParams, "this callback is called when the table is loading state from the stored data". That means, I can't check if the page 10 has no data or not, if the page 10 still have data, I shouldn't update data params in stored.
What do you think if I can use stateLoaded option, it fired once when state loaded:

"stateLoaded": function (settings, data) {
     if(settings._iRecordsDisplay == 0) {
            data.start = 0;
        }
  }

Cheers,
Lam

colin

Hi @n2lose ,

That's true. Another option would be to do it in the initComplete, at that point all the data is in the table so you'll be have more options on what you can do. You can get the state that was loaded with state.loaded(), check the current paging information with page.info(), and then make any decisions of changing the page with page(),

Hope that helps,

Cheers,

Colin

n2lose

Hi @colin ,

Thanks for your help me, I have tried to use initComplete option, it works well. But I have got other problem, seems the state doesn't save the query params in the URL request to API.
As you know, I'm using server side to get the data before create Data Table. So, that means we can add some query in parameters like this in the request:
http://example.com/list?firstName=A&lastName=EN&orderField=score&orderType=desc&start=0&length=2&draw=5&_=1553615100566
Actually, i have added these in the ajax data option:

    "ajax": {
                "type": "GET",
                "url": example.com/list',
                "data": function (data) {
                    //1. change values of currentObject.filterParams here
                    var filterParams = buildFilterQueryParams();

                    //2. get current order, at the moment, only support order on a single field
                    if (data.order.length > 0) {
                        var orderFieldName = data.columns[data.order[0].column].data;
                        var requestOrder = {"orderField": orderFieldName, "orderType": data.order[0].dir}
                        $.extend(filterParams, requestOrder);
                    }
                    // 3. get page number and limit
                    var info = {"start": data.start, "length": data.length, "draw": data.draw};

                    $.extend(filterParams, info);
                    return filterParams;
                }
            },

But i didn't see this query parameters in the stateParams.
Is there any way to save it in the state, too?
I would like when we back to the list page or event refresh, it should be look up in the state before.

colin

Hi @n2lose ,

You can add your information to that being stored with stateSave - for example, this here is saving the selected rows. You can use that to add your information,

Cheers,

Colin