JQuery datatable with ajax, post API call hook - ajax

Question

I am implementing jquery DataTable with server-side pagination. Refer code snippet below -
Script
$(async function() {
$('#registry_table').DataTable({
serverSide: true,
ajax: {
url: 'localhost:3000/provenance/registries',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem("token")
},
data: () => {
return {page: 0, per_page: 5};
}
},
columns: [
{data: 'name', defaultContent: 'N/A'},
{data: 'created', defaultContent: 'N/A'},
{data: 'extrinsic', defaultContent: 'N/A'},
{data: 'registry', defaultContent: ' <span class="text-primary bg-white fa-border d-inline-block" style="cursor: pointer" title="Rename Registry"><i class="fas fa-pen-nib"/> Rename</span>'}
],
language: {
searchPlaceholder: "Search...",
search: "",
lengthMenu: "_MENU_ items/page"
}
});
});
Html
<table class="table table-striped mg-b-0" id="registry_table">
<thead>
<tr>
<th class="text-left">#</th>
<th class="text-left">Name</th>
<th class="text-left">Created on</th>
<th class="text-left">Transaction</th>
<th class="text-center">Action</th>
</tr>
</thead>
</table>
API response
{
"registries": [
{
"registry": 489607958,
"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
"name": "test 7",
"created": "2020-09-14T15:08:49.006766"
},
{
"registry": 1421927575,
"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
"name": "test 6",
"created": "2020-09-14T15:08:43.104835"
},
{
"registry": 1560576458,
"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
"name": "test 4",
"created": "2020-09-14T15:08:34.132407"
},
{
"registry": 1766285412,
"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
"name": "test 5",
"created": "2020-09-14T15:08:27.376323"
},
{
"registry": 155398053,
"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
"name": "test 3",
"created": "2020-09-14T15:08:16.768747"
}
],
"total": 7
}
If the total number of rows is 7 and per_page = 5, then it should show 2 pages. But in the browser, it shows 5 pages. Also, page info shows wrong information.
Browser
My questions are-
Is there a way to set the number of pages/total items once data fetched
Page info should be Showing 1 to 5 of 7 entries (filtered from 7 total entries), how to set those properly?
How to pass the entire row as a parameter to a function (rename button)
Note: API is in production and unlikely to change.
Update 1:
Script (modified data and added dataSrc with ajax section
data: (d) => {
d.page =self.page;
d.per_page =self.per_page;
delete d.columns;
delete d.order;
delete d.search;
delete d.start;
delete d.length;
},
dataSrc: (response) => {
response.draw = 1;
response.recordsTotal = response.total;
response.recordsFiltered = response.registries.length;
response.data = response.registries;
return response.data;
}
Now it doesn't show any data but, everything else is fine.