Using ServerSide to Call PAGED Api

Using ServerSide to Call PAGED Api

timcadieuxtimcadieux Posts: 53Questions: 14Answers: 0
edited September 12 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 an accepted answers - jump to answer

Answers

  • sandysandy Posts: 60Questions: 0Answers: 9

    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: 60Questions: 0Answers: 9
    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: 53Questions: 14Answers: 0

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

  • timcadieuxtimcadieux Posts: 53Questions: 14Answers: 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" }
                        ]
                    });
    
            });
    
Sign In or Register to comment.