How to Use Metronic 9 Datatable Remote Data Source with Request Header
Hello, is there a way for KT datatable to call remote data source api with request header, eg. if the api request must include token header? I already check in the documentation for datatable in metronic 9, but the example only covers api call without request header. Also, for the json response format, should I follow the format of example that includes page, pageCount, etc, or can I use only data needed for datatable?
Thank you.
Replies (6)
Hi Abudzar Ali
Please send your codes which probably have the issue. We will help to check it.
Thanks
Hi
Yes, for server-side pagination to work correctly with KTDataTable, the API response needs to include certain metadata about the total number of records. Based on the code, here's what your API response should look like:
{
"data": [
// Your data array here
{ "id": 1, "name": "Example 1" },
{ "id": 2, "name": "Example 2" }
// ...
],
"totalCount": 100 // Total number of records (across all pages)
}The key fields are:
- data: Array containing the records for the current page
- totalCount: Total number of records available (across all pages)
If your API returns a different format, you can use the mapResponse configuration option to transform the response:
const dataTableOptions = {
apiEndpoint: "https://your-api-endpoint.com/data",
requestHeaders: {
"Authorization": "Bearer your-auth-token-here"
},
mapResponse: function(response) {
return {
// Transform your API response to match the expected format
data: response.items, // or whatever your data array is called
totalCount: response.total // or whatever your total count field is called
};
},
// other options...
};The "1-NaN of undefined" error occurs because the component can't find the total count of records in the response, which it needs to calculate pagination properly.
Also, when making requests to your API, KTDataTable will automatically include these query parameters:
- page: Current page number
- size: Number of records per page
- sortField: Field to sort by (if sorting is enabled)
- sortOrder: Sort direction ('asc' or 'desc')
Make sure your API handles these parameters to return the correct page of data.
Thank you, I finally managed to check this again and get the data loaded properly, and also got the pagination working, but I got error that says like this:
"SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '0' at line 1 (Connection: mysql, SQL: select * from `perangkats` offset 0)"
I am using page parameter with skip() method, and size parameter for take() in laravel query. First I assume that page parameter for setting offset starts from 0, but when I check the network it shows 1. This error is not making datatables not working, the pagination and data still loaded correctly, but I worried that it might affects something in the future. Do you have any suggestion for this?
I got another thing to ask, is there a way to add requestbody to ktdatatable? I want to implement server side search and filter, but I need to send some parameters for api call.
Thank you.
Hi Abudzar Ali
Sorry for the delay. The KTDataTable component accepts a requestHeaders configuration option that lets you specify custom headers for the API requests:
const dataTableOptions = {
apiEndpoint: "https://your-api-endpoint.com/data",
requestHeaders: {
"Content-Type": "application/json", // Override the default content type if needed
"Authorization": "Bearer your-auth-token-here",
"X-Custom-Header": "CustomValue"
},
pageSize: 10,
// other options...
};
const dataTable = new KTDataTable(element, dataTableOptions);By default, the component sets 'Content-Type': 'application/x-www-form-urlencoded', but you can override this if your API requires a different content type.
Thank you and sorry for the late response. I already succeeded in implementing requestHeaders for KTDatatable configuration and shown the data, but the pagination is not working because it shows "1-NaN of undefined" on pagination part. Should i also include the number of data (count) in the json response for the api url, or maybe there are some mandatory response value that needed for KTDatatable api url, especially in server side pagination case?
