page().draw() is not refreshing the rows on the table

CesarD

I have a datatable grid that is fed by ajax, and when I have a set of search criteria saved on my application, I'm instructing datatable to set that criteria as parameters and performing an ajax.reload(). On the reload() callback I check that if I had saved the number of page of the last search to restore it, so I do the following: table.page(pageNumber).draw('page'). Problem is, if I check table.page() value, it returns the page I instructed it, but the rows on the grid are the ones from page 1. If I access the rows programmatically, they are page 1 rows too...

How can I do to make it refresh the rows to the previously set page?
Thanks.

zachpainter77

I do this in my custom knockout binding...

this seems to work for me:

table.page(/*page number here*/).draw(false);

CesarD

Yes, I'm doing that too... I tried the 3 parameters possible (true, false and 'page') and none of them seem to work.

allan

If you want to retain the page when using ajax.reload() simply pass false as the second parameter - e.g.: table.ajax.reload( null, false );.

Allan

CesarD

Hi Allan. No, I want to repeat the last search and go back to the same grid page I was before leaving the web page.

Say this case: I have a form with search fields to filter data that I will show on my DataTable. I write my search criteria and hit Search, the DataTable will perform the search and bring data. I might not find the record on the first page so I keep scrolling through datatable pages (let's say I find my record on page 5), so I click Edit and go to another site page where I edit the record, then go back to the page where I had the datatable grid. I want to instruct DataTable to perform the same search as before and go back to page 5. I save all the search data and last DT page on the browser's local storage, so I refill the search fields and perform table.ajax.reload( ), and in the reload callback I do table.page(pageNumber).draw('page'), but it only shows 5 in the pager, but the records belong to page 1 of the DataTable...

allan

I see - thanks for the clarification. A search in DataTables will always reset the paging. If you want to retain the paging you would need to read the page number before you trigger the search and then show it again after.

Allan

CesarD

Thanks Allan for replying.
Right, I do that by saving into browser local storage the page number where I'm standing prior to navigate away from the grid web page and then when I'm back I perform the search again and recover the page number where I was standing, but, like I mentioned before, when I execute the instruction table.page(pageNumber).draw('page'), it shows the correct page in the grid pager but the records are still the ones from the 1st page.
What am I doing wrong here? Isn't table.page(pageNumber).draw('page') supposed to jump into the specified page of the table and render the new rows?? I'm stuck here and don't know what else to try :(

allan

I'd need a link to a test case showing the issue to be able to offer any help.

Isn't table.page(pageNumber).draw('page') supposed to jump into the specified page of the table and render the new rows?

Yes - and it does: http://live.datatables.net/komizoje/1/edit

Allan

CesarD

Maybe I need to clarify I'm doing server side processing with ajax? Does that make any difference? I make the page().draw() call from the table.ajax.reload() callback.
I'll try to get a working sample of my case with ajax and post it here if needed.

allan

Yes, if you could provide a test case that would be great.

Thanks,
Allan

CesarD

I'm having a hard time finding a public feed or api that I could paginate to provide for the test code... Is there any you guys know of? Thanks.

CesarD

Ok, I found a public API to paginate from.
Here I created the test case: http://live.datatables.net/qonogebu/1/edit

EDIT: I just want to note that this is not an exactly 100% similar code like the one I'm working with, because the response of my own server application returns the proper json with all the information DataTables needs (like recordsTotal, recordsFiltered, draw and the data object array). The example provided uses the best feed I could get out there to build it, hence the difference and the extra "work" on the data function to adapt it and make it work.

Let me know if you need me to provide any additional information.

Thanks a lot!

allan

In your example you would need to use:

    initComplete: function () {
      table.page(2).draw('page');   
    }

i.e. wait for the table to load first.

Perhaps you could modify this example which really does work with server-side processing in order to show the issue.

Allan

CesarD

Ok, I tried modifying the previous example by using the same ajax options you showed me in your new example. Pagination works fine without any extra stuff. I implemented the initComplete function in the DataTables configuration, but when it first loads the table, it shows the pager in the correct page, but records are the ones from first page.
Check it out: http://live.datatables.net/qonogebu/3/edit As it starts, if you click page 1, records will remain the same, meaning the starting ones are not from page 3 but 1. This is exactly my problem.

Thanks again for your support on this matter.

allan

Interesting. For some reason it needs a setTimeout to change the page while in server-side processing mode from initComplete: http://live.datatables.net/qonogebu/4/edit .

That shouldn't be the case - I will come back to this to dig into it and see what is causing that issue. That is the workaround at the moment though.

Another option (a better one if you need to set the page at initialisation time) is to use the displayStart option.

Allan

CesarD

Thanks a lot, Allan!

I managed to create a workaround using the displayStart option, as well as a combination with deferLoading since I was trying to make the datatable to not show the rows immediately if there was no saved search. The final solution was not using initComplete nor table.page() at all.

Thanks a lot again for all your support.