Using ServerSide to Call PAGED Api

Using ServerSide to Call PAGED Api

timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
edited September 2019 in DataTables 1.10

So I have to get content from an existing API. The API takes 2 params, From and Take

They also return the TOTAL Records in a header and so I'm attempting to get the Paging to work with this...

I've used the code below but it only displays the current 10 records..

Anyone have a suggestions as to how i can get this to work and an API that is already paged?

live.datatables.net/vazinuka/1/edit

This question has accepted answers - jump to:

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi timcadieux,

    Take a look at the following documentation.

    The preXhr event occurs before Datatables makes an ajax request to the server. On this event you are able to access the data parameter and adjust it's values accordingly to your own needs, before making a request for the data from the server.

    I think you want to set your from and take properties based on the start and length properties within the sent parameters of the server side processing object.

    You then also need to use the xhr event to modify the data that the server is returning into the format that datatables is expecting.

    Hope this helps,

    Sandy

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Something along the lines of the following

    $(document).ready( function () {
      $('#example').on('preXhr.dt', function (e, settings, data) {
        data.from = data.start;
        data.take = data.length;
      });
    
      $('#example').on('xhr.dt', function (e, settings, data) {
        // Do your conversion here
      });
    
      var table = $('#example').DataTable();
    } );
    
  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    Sandy, I hate to say, but i dont follow?

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    oh wow, I feel like a moron.
    I was able to get it to work like so

            $(document).ready(function () {
    
                $('#example').on('preXhr.dt', function (e, settings, data) {
                    data.from = data.start;
                    data.take = data.length;
                    console.log(data.start);
                });
    
                $('#example').on('xhr.dt', function (e, settings, data, json) {
                    data.recordsTotal = 300;
                    data.recordsFiltered = 300;
                });
    
                var table = $('#example')
                    .dataTable({
                        "processing": true,
                        "serverSide": true,
                        "ajax": {
                            url: "https:///api/V1/Institutions?List?from=0&take=10",
                            async: true,
                            dataSrc: function (data) {
                                return data;
                            }
                        },
                        "columns": [
                            { "data": "id" },
                            { "data": "name" }
                        ]
                    });
    
            });
    
This discussion has been closed.