Using ServerSide to Call PAGED Api

timcadieux

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

sandy

Hi timcadieux,

Take a look at the following documentation.

• Server Side Processing
• preXhr Event

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

sandy

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();
} );

timcadieux

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

timcadieux

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" }
                    ]
                });

        });