Ajax automatically change page on ordering and search

jellepals

We use the Jquery Datatables Ajax method for recieving data in the datatable like this:

        datatablesettings.processing = true;
        datatablesettings.serverSide = true;
        datatablesettings.ajax = function(data,callback,settings){

            let senddata = getRitDataDefaults();
            senddata.page = data.draw; 
            senddata.order_field = data.order[0].column; 
            senddata.order_field_type = data.order[0].dir; 

            if(data.search.value.length > 0){ 
                senddata.search = data.search.value;
            }

            dataGetNoAttachedRittenOverview(senddata,function(data){ 
                callback(data); 
                datatable.fnReloadAjax();
            });

        }; 

This works great. In addition we also like to use server side ordering and server side searching.

But there is an strange problem that occurs. When we change the ordering or typ an letter in the searchbox:
the request work but the pagination is pushed one forward. So when we click on an column to change the order the
page is set to 2. And after clicking again the page is set to 3. very strange.

The page should stay on 1. The same happens when we use the search bar. Or is it possible to force the page
to 1 before the request is made?

Does somebody known an solution to this problem? Thanks!

bindrid

I don't see where you are handling data.start or data.length which is critical to setting page number.

jellepals

Hello bindrid,

Thanks for this answer! Can you show me an example of this? I cannot find this in the documentation example: https://datatables.net/examples/data_sources/server_side.html

bindrid

The difference is that in the example, the entire request object is passed through untouched, so the information is included.

In your case, you are using the datatable object to populate your own object and so the information gets lost.

Take a close look at this page http://datatables.net/manual/server-side , particularly at start and length.

jellepals

Thanks for the help. This was the problem indeed. I used the draw as the page indicator. But this draw method indicator is just for the datatable to handle async calls. So the solution is indeed to use start and length:

        datatablesettings.ajax = function(data,callback,settings){
          
            let senddata = getRitDataDefaults();
            senddata.draw = data.draw; 
            senddata.page = data.start; 
            senddata.length = data.length; 
            senddata.order_field = data.order[0].column; 
            senddata.order_field_type = data.order[0].dir; 

            if(data.search.value.length > 0){ 
                senddata.search = data.search.value;
            }

            dataGetNoAttachedRittenOverview(senddata,function(data){ 
                callback(data);       
            });

        }; 

It is also really easy to use this in an query in the back-end like this:

LIMIT ".$length." OFFSET ".$start

Thans for your help!