Server side paging

dennish · November 2017

Hi, there's probably an example somewhere but I'm trying to use datatables to do server side paging, but I'm not sure how datatables keeps tabs on which page it's currently on. Also, how does datatables know what the page size is? How would I tell it this? Is there a good example somewhere that shows the front end with javascript and ajax for this, and also maybe the C# MVC controller that the ajax talks to.
Thanks,
Dennis

kthorngren · November 2017

Here is the doc:
https://datatables.net/manual/server-side

And some examples:
https://datatables.net/examples/server_side/index.html

Kevin

dennish · November 2017

thanks but I was wondering if there were some full depth examples. I'm already aware of these links, but it's a bit like trying to learn about how a car works by reading an encyclopedia about car parts. Not quite the same.

rduncecb · November 2017

I think the idea of the server side protocol is that you don't have to worry about how datatables keeps track of the page, you trust that it does. The important thing to know when implementing a server side implementation in my opinion is that datatables in the source and in control of the paging. Your server side implementation must simply do as it's told based on the information in the protocol packet.

DataTables keeps track of the page and provides page for querying and setting the page and for the length of the page page.len. When the page or page size changes through either the interface or API, datatables will make the appropriate ajax call to get the data for the page.

allan · November 2017

Exactly that. If you really want to know how DataTables is keeping track of its internal information, you are welcome to read the source - that's the function where the server-side processing response is handled.

Allan

dennish · November 2017

Note: The above code is all in one block, yet when posting it has put the lower half in a code block.

allan · November 2017

What code? What block? I'm a little confused I'm afraid.

Allan

dennish · November 2017

Hi, is there any way of converting the below, which already uses dataTables with client side paging, to use server side paging instead.

The page initially loads and the dataTables table is populated, but users can press filters and the data for the dataTables table is updated on the page via AJAX

Given that the on screen table is having its data changed via this AJAX, I'm not sure if it's possible to use DataTables for server side paging, as it won't know what the data size is as it's constantly changing.

I've tried putting in Serverside: true, Paging: true, etc, but it didn't work.

        MakeTable();

        $("input[name=options]:radio, input[name=type]:checkbox").change(
            function () {
                $('#busy').show();

                var baseUrl = '@Url.Action("List")?';

                var types = 0;
                $.each($("input[name=type]:checked"), function (i, val) {
                    types |= val.value;
                })

                $.ajax(baseUrl + producttype=' + types, {
                    cache: false,
                    success: function (data, textStatus, jqXHR) {
                        $("#leadsContainer").html(data);
                        MakeTable();
                    },
                    dataType: "html"
                });
            });
    });

tangerine · November 2017

I've tried putting in Serverside: true,

Did you apply it correctly (case-sensitive)?

  "serverSide": true,

dennish · November 2017

Hi there, yes one of the first things I tried was serverSide: true, but if I add just that statement only, it just bombs. Could be a problem with the controller.

allan · November 2017

Could be - in what way did it bomb? Did you get any error messages? Does the controller correctly process server-side processing requests?

Allan

dennish · November 2017

well my controller looks like this: (I've taken out the middle bits because that's just processing to SQL to get data which works fine). In the controller I'm using an offset and number of rows to get the data for my page. The problem I have is I don't know how to get the information about the page number and page size from the datatable at the front end to this controller in order to get the data for the page.

    // GET: Opportunity/ListWithPaging
    public async Task<ActionResult> ListWithPaging(LeadListTypeEnum? active, SystemTypeEnum? productType, int offset, int nrows)
    {


        return Json(leads, JsonRequestBehavior.AllowGet); 
    }

allan · November 2017

That doesn't look like it would return the recordsTotal, recordsFiltered and other parameters that the server-side processing documentation I linked to shows, but it depends exactly on what the structure of leads is.

Allan

dennish · November 2017

Yes you're absolutely right, it doesn't pass any information about the page offset, page size, or anything. I don't know how to get that information from the front end to my controller, or how to get it from the controller to the frontend.
all the information I've seen in various places say just add serverSide: true and that's about all the documentation I can find. Ideally a working example on how to use C# MVC with DataTables for serverSide paging would be a saviour.

rduncecb · November 2017

Any use:

https://datatables.net/forums/discussion/40690/sample-implementation-of-serverside-processing-in-c-mvc-ef-with-paging-sorting-searching

https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side

?

dennish · November 2017

okay thanks. I still can't see how the page offset and page size are getting passed to the controller and back to the frontend. If i was writing server side paging myself, those are the things I'd need, so I don't understand how datatables magically doesn't need them.

kthorngren · November 2017

This section of the Server Side Processing doc explains the parameters that are sent to the server.
https://datatables.net/manual/server-side#Sent-parameters

Kevin

allan · November 2017

so I don't understand how datatables magically doesn't need them.

It does need them! The documentation Kevin linked to, and I linked to above, shows the parameters that are sent to the server for processing and then the parameters that DataTables needs back.

Allan

dennish · November 2017

Great. My front end skills aren't that good so maybe that's the problem. Does anyone know how I could pass the page offset and page size via AJAX from DataTables at the front end to the controller, and then feed that back from the controller to DataTables with a new set of rows?

allan · November 2017

DataTables should already be sending that data to the server. If you have a look at the parameters being sent in your browser's "Network" debug inspector, the parameters in the documentation will be getting sent to the server. The question therefore is how to access them on the server-side. Typically that would be something like Request.Form["start"] etc.

Allan

fedeolto · February 2018

Hello! I see that this post is from some months ago but I'd like to leave here this comment because at the beginning I was stuck too, probably due to my lack of PHP knowledge making me read the examples as pseudocode without understanding deeply where request parameters can be found in server side script.

My stack is:
jQuery
ExpressJs
rest apis

My problem was that I couldn't be able to retrieve the parameters DataTable needs in order to work, I needed to observe the XHR traffic via the web inspector to discover it puts them in the query string.

So I created this very elementary gist, hope it helps
https://gist.github.com/fedeolto/3027f22147d8e1fcb66ac5f773d23a12

allan · February 2018

Your PHP knowledge or the discussion about .NET above won't really help you if you are using ExpressJS, which runs on NodeJS. I typically use body-parser to get body parameters.

Allan

Mohitgupta123 · July 2018

I can't understand when click on page number than how to hit controller and which parameter is send by clicking on that page number.

Note- I just want to know how to send parameter like page number ,limit and display count to the controller in Spring MVC.

If some one implements client side pagination than please provide that example

Mail_id-- guptamohit.psit@gmail.com
skype_id- guptamohit.psit@gmail.com

Thanks in advance.

fedeolto · September 2018

@allan I saw your comment just now, I was meaning that since the server side code in the examples is written in php, it wasn't immediately comprehensible to me. Nothing that cannot be understood with some patience, sure.
Thank you for maintaining all of this

icaruss · July 2019

I see in the ajax url it creates automatically it sends the default ordering option, which is the first column and ASC always.

order[0][column]=0&order[0][dir]=asc

Is there a way to configure this and change default order setting?

tangerine · July 2019

Default order setting is explained in the docs:
https://datatables.net/examples/basic_init/table_sorting

Server side paging

Server side paging

Answers

Howdy, Stranger!

Categories

DataTables

Server side paging

Server side paging

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables