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.
Related
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.
I has create HTML page, with user entry data in page then upload to SQL server.
I has study DataTable to load array to table, try edit still not , has any one can help?
var array = ['54 GR', '89 GR', 'Internal Transfer', 'Putaway']
$('#example').DataTable({
data: array,
"searching": false,
columns: [{
"data": 0,
"title": "Date"
}, {
"data": 1,
"title": "Account"
}, {
"data": 2,
"title": "Type"
}, {
"data": 3,
"title": "OPDeployed",
"render": function(data, type, row, meta) {
return "<input type='text' value=''/>";
}
}]
});
Its really difficult to say without being able to see the page or even the code. All I can really say is that the load order should be:
jQuery
jQuery UI
DataTables
2 and 3 can be swapped and you shouldn't load more than one of each.
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>';
}
} ]
} );
I am using the latest datatables with select extension. I am trying to select multiple rows programatically after the table is rendered. I am trying to achieve this in the drawCallback() as below:
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name",
"drawCallback": function( settings ) {
var api = new $.fn.dataTable.Api( settings );
api.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
}
});
But, I am getting an Uncaught TypeError: Cannot read property 'style' of undefined error.
Here is the link for live version - http://live.datatables.net/yemiqafu/2/
P.S: I have used [id='Bradley Greer'] as selector since there is a space in the id. I had to do this for live demo and this is not the reason for the error that is thrown.
SOLUTION
Option drawCallback is not a correct place to perform row selection.
Ideally, you should use initComplete option instead, but there was an issue with Select extension that was fixed 10/7/15 which prevented Select to work in initComplete. Until then you can use the workaround below for HTML sourced data or use nightly build of DataTables and Select extension.
For table with data from HTML source you can select your rows after DataTables initialization.
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name"
});
table.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
DEMO
See this example for code and demonstration of a workaround for table with HTML sourced data.
See this example for code and demonstration of using nightly JS/CSS builds for table with Ajax sourced data. This example could be used for HTML sourced data as well.
I am working on this example from DataTables.net but I have made modification so that it works with my ajax call to my API.
My problem is that my API returns the DateTime values like this...
Created=2015-02-13T00:00:00
I need to be able to convert that to just be just the date without the time for my table (hopefully without changing the API). I have tried everything that I know to try. I am still sort of a beginner at this advanced javascript stuff. I was trying to do just a simple substring but I dont think that is working. Well at least how I was trying anyways.
Thanks for anything help!
DataTables v1.10.5
Jquery v1.11.2 (due to need to support IE8)
Original Problem Code:
$(document).ready(function () {
var table = $('#AllHuddleRecords').DataTable({
"ajax": "../api/huddle/posts",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "EmpName" },
{ "data": "Created" },
{ "data" : "PriorityName" },
{ "data" : "TopicName" }
]
});
Thanks to the guidance of cmxl...here is the working code...
var table = $('#AllHuddleRecords').DataTable({
"ajax": "../api/huddle/posts",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "EmpName" },
{ "data": "Created" },
{ "data" : "PriorityName" },
{ "data" : "TopicName" }
],
"columnDefs": [
{
"render" : function (data, type, row) {
return new Date(data).toLocaleString();
},
"targets": 2
}
]
});
You can hook in to the column rendering event. See the documentation here:
https://datatables.net/examples/advanced_init/column_render.html
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
return data.slice(0, data.indexOf('T'));
},
"targets": 0
},
{ "visible": false, "targets": [ 3 ] }
]
} );
} );
Or if you want to parse the string as a date you can refer to this answer here:
Converting string to date in js
//...
"render": function ( data, type, row ) {
return new Date(data).toString();
}
//...
Here you can look even deeper into the Date object in Javascript:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date
Is it possible to do some pre-processing on your data before you send it to data tables, for example if you are inserting the following data into your data table, use Date.parse() on each element of your data to convert to the desired format?
var ajaxData = {
"data": [{
"EmpName": "Bob",
"Created": "2015-02-13T00:00:00",
"PriorityName": "Priority1",
"TopicName": "Topic1"
}]
};
$(ajaxData.data).each(function() {
var dateMillis = new Date(this.Created);
this.Created = dateMillis.getMonth() + "/" + dateMillis.getDay() + "/" + dateMillis.getFullYear();
});
Note that if you want to sort on your date column, then the solution may well be to pre-process data and convert dates to milliseconds using Date.parse() and then use render to convert the date to readable format as cmxl suggested. Good luck!