Server side pagination in KTDatatable (Metronic)

Question

I am new to KTDatatable in Metronic.

I am trying to use server side pagination in Metronic dashboard, and I am parsing the data in a KTDatatable, but I can't find a way to parse the returned data from the API and to view number of pages and each page URL.

The code that I was able to write so far is:

data: {
    type: 'remote',
    source: {
        read: {
            url: dataURL,
            method: 'GET',
            contentType: 'application/json',
            map: function(data) {
                var cards = data.cards.data;
                var currentPage = data.cards.current_page;
                var lastPage = data.cards.last_page;
                return cards;
            }
        },
    },
    pageSize: 10,
    serverPaging: true,
},

In this code I was able to get the first ten records but:

1- I wasn't able to parse them the way I want in the table.

2- I wasn't able to show the pages number nor calling the API for the second page or the (x) page I want.

These are the things I want to do.

Thanks in advance.

Answer 1

You can go back to the end of the KT-Datatable documentation to find most of answers you want KT-Datable documentation, but I am gonna explain more hoping it will be more clear.

So the returned value from the API (Json) should look have two main objects meta and data, and it looks something like this:

{
  "meta": {
    "sort": "desc",
    "field": "IssueName",
    "page": 1,
    "pages": 2,
    "perpage": "10",
    "total": 11
  },
  "data": [
    {
      "IssueName": "******",
      "CardNumber": "******"
    },
    {
      "IssueName": "******",
      "CardNumber": "******"
    }
  ]
}

And after getting the values of the response from the API you should only return the data object to be parsed by the datatable so the map function should look something like this:

map: function(data) {
    return data.data;
}

and it will process the meta data itself.

To parse the data into the columns you should use the same key name of the data in column definition array, so in my example I used it like this:

columns: [
    {
        field: 'IssueName',
        title: columnsTitles.issue,
        type: 'string',
    },
    {
        field: 'CardNumber',
        title: columnsTitles.card_number,
        type: 'string',
    },
]

And every time the datatable calls the API it will send more data that will help you give the right response, the data will be on a shape of an array (The field name should be the same as the key):

[
    "pagination" => array:4 [
        "page" => "1"
        "pages" => "2"
        "perpage" => "10"
        "total" => "11"
    ],
    "sort" => array:2 [
        "field" => "IssueName"
        "sort" => "desc"
    ],
]

The sent data is related with the pagination and sorting type you have to get from the API, and you can also add filters and they will be stored in the array in the "query" field, and you can handle them in the backend.