Server side paging

Server side paging

dennishdennish Posts: 9Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
  • dennishdennish Posts: 9Questions: 1Answers: 0

    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.

  • rduncecbrduncecb Posts: 125Questions: 2Answers: 28

    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.

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    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

  • dennishdennish Posts: 9Questions: 1Answers: 0

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

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

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

    Allan

  • dennishdennish Posts: 9Questions: 1Answers: 0

    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.

    function MakeTable() {
    if ($('#leads').length) {
    $('#leads').DataTable({
    stateSave: true,
    "initComplete": function (oSettings, json) {
    $('#leadsContainer').show();
    $('#busy').hide();
    },
    "order": [[3, "desc"]],
    "autoWidth": false,
    "aoColumns": [
    null,
    null,
    null,
    { "orderSequence": ["desc", "asc"] },
    null,
    null,
    null,
    null
    ],
    "lengthMenu": [[15, 25, 50, 100, -1], [15, 25, 50, 100, "All"]]
    });
    }
    else {
    $('#busy').hide();
    }
    }

            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"
                    });
                });
        });
    
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    I've tried putting in Serverside: true,

    Did you apply it correctly (case-sensitive)?

      "serverSide": true,
    
  • dennishdennish Posts: 9Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

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

    Allan

  • dennishdennish Posts: 9Questions: 1Answers: 0

    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); 
        }
    
  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    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

  • dennishdennish Posts: 9Questions: 1Answers: 0

    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.

  • dennishdennish Posts: 9Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    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

  • dennishdennish Posts: 9Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    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

  • fedeoltofedeolto Posts: 4Questions: 1Answers: 0

    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

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    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

  • Mohitgupta123Mohitgupta123 Posts: 2Questions: 0Answers: 0

    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.

  • fedeoltofedeolto Posts: 4Questions: 1Answers: 0

    @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 :blush:

  • icarussicaruss Posts: 1Questions: 0Answers: 0

    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?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

This discussion has been closed.