Develop Reference

Server side pagination in KTDatatable (Metronic)

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.

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.

Kendo grid removes row, but does not call destory URL

I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing

Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here

Adding onClick links into a JSON File Without javascript

So I am trying to mimic a data visualization example code from cytoscape library and add links to the nodes of the data.
Here is the example
http://js.cytoscape.org/demos/cose-layout/
Here is the code associated with the example
https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-layout
In the code on github there is the data.json file and example of a node looks like this
[{
"data": {
"id": "605755",
"idInt": 605755,
"name": "PCNA",
"score": 0.006769776522008331,
"query": true,
"gene": true
},
"position": {
"x": 481.0169597039117,
"y": 384.8210888234145
},
"group": "nodes",
"removed": false,
"selected": false,
"selectable": true,
"locked": false,
"grabbed": false,
"grabbable": true,
"classes": "fn10273 fn6944 fn9471 fn10569 fn8023 fn6956 fn6935 fn8147 fn6939 fn6936 fn6629 fn7928 fn6947 fn8612 fn6957 fn8786 fn6246 fn9367 fn6945 fn6946 fn10024 fn10022 fn6811 fn9361 fn6279 fn6278 fn8569 fn7641 fn8568 fn6943"
},
I tried adding
"links": {
"self": { "href": "https://www.google.com" }
},
and variations of "links": something but no dice.
I was like okay maybe I can take the ID and add a link via javascript but I haven't been successful.
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '';
}
} ]
} );
I am wondering if this is possible to add it in the JSON file directly and just link to external sites without the javascript. When I open the inspect it basically just shows a canvas with no way to access what's inside the canvas it seems like.
I am definitely new to JSON so any help in the right direction would be greatly appreciated.

Yes sure you can do this use fnDrawCallback
fnDrawCallback: function( oSettings,data,index ){
$('.linkClassName').on('click', function(event){
// do whatever u want
});
}
And add class Name to your link
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '<a class="linkClassName" href="https://www.google.com">data</a>';
}
} ]
} );

Jquery Datatable source from Application state

I have an application built using Reactjs -Redux. Now- Im trying to incorporate Jquery Datatable. So the data that I want to be on my datatable is fetched by dispatching action on my redux. Basically, I already have my data on my application state. I need this data from my application state to be on my jquery datatable. Like so:
$('#example').DataTable( {
"ajax": application_state.data,
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
Obviously, the above code won't work because like I said my data is already on my application state and I don't have to use "ajax". I also tried something like this:
$('#example').DataTable( {
"data": application_state.data,
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
But, I still have no luck.
The JSON data that I have on my state is completely valid, it's an array of object. I just want it loaded on my jquery datatable. Now, there is one option that I know will work 100% but it's the dirty way. That is by building your data manually on the table. I meant creating the rows (<tr><td>..) by yourself. I don't like that.
Your response is greatly appreciated.
Best

I found a way to do it using aoColumns and fnAddData. Something like this:
// this is where field mapping happens
const cols=[
{'mDataProp':'<column/fieldname>'}
]
const dataTableOptions = {
responsive: true,
bDestroy:true,
pageLength: 25,
deferRender:true,
aoColumns:cols //The aoColumns
}
const _dt=$('#example')
.dataTable(dataTableOptions);
_dt.fnClearTable();
_dt.fnAddData(<your state data here>)// Then Add your data using fnAddData
Thanks for viewing guys... cheers! I hope others will find this helpful too.

It is possible to transform a Mysql select onto a Dataset with pure Jquery?

i'm using Sqlite with local database storage for google chrome browser.
My query is like the next...
var query = "SELECT * FROM items;";
In my table i have 6 field data
i already have a table in my html wiht id="example" and loading the head directly from the script as:
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Date" },
{ "title": "Number" },
{ "title": "Name" },
{ "title": "Slogan" },
{ "title": "Description", "class": "center" },
{ "title": "Amount", "class": "center" }
]
});
What i need is the "Dataset" variable become the SQL arrays like
var dataSet = [
['field1','field2','field3','field4','field5','field6'],
['field1','field2','field3','field4','field5','field6'],
['field1','field2','field3','field4','field5','field6']
.
.etc
.etc
.
];
Here's the example of what i want to use https://www.datatables.net/examples/data_sources/js_array.html
All is local so i don't have PHP server to do that in other way.
Thanks for your answers.