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!
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.
Can anyone help me please .
I am trying to get solution to two problems. First, how to display LocalDate in ajax response. 2nd, iterating over list of Custom objects received in ajax response.
I am passing List of Custom Object and localDate in ajax response and not sure how to display it in UI. date filed is displaying [object object]. Below is my ajax call code.
var table = $("#example").DataTable( {
"bProcessing": true,
"bServerSide": true,
'sDom' : 'T<"clear">lrtip',
"sort": "position",
"sAjaxSource": "springPaginationDataTables.web",
"aoColumns": [
{ "mData": "name" },
{ "mData": "position" },
{ "mData": "office" },
{ "mData": "phone" },
{ "mData": "start_date" },
{ "mData": "salary" },
{ "mData": "dob" },//LocalDate
{ "mData": "addresses" },//list of addresses
],
columnDefs: [
{
targets: [ 6 ],
render: function ( data, type, row ) {
console.log(type);
return data;//process LocalDate here
}
},
{targets: [ 7 ],
render: function ( data, type, row ) {
console.log(type);
return data;//process addresses list here
}
}
]
} );
From MVC Controller I am passing list Of persons into JSON object as below
PersonJsonObject personJsonObject = new PersonJsonObject();
//Set Total display record
personJsonObject.setiTotalDisplayRecords(500);
//Set Total record
personJsonObject.setiTotalRecords(500);
personJsonObject.setAaData(personsList);
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json2 = gson.toJson(personJsonObject);
return json2;
PersonJsonObject is Jquery Datatable kind of object which holds records track and list of data to be displayed on UI.
Person object has list of address Object. How do iterate over list after getting list say data.getaddresses and store this in variable. I know how do we iterate over list using jsp tags but not sure how to do same in Jquery
Its solved. For LocalDate issue, custom Module needs to be registered. Check this link for details.
Ajax response does not parse LocalDate
For iterating over list, use simple jquery foreach loop
$j.each(data, function (index, value) {
var temp = value.field1+" "+value.field1+" ";//field1 and field2 are fields of custom object
console.log(temp);
return temp;
});
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.
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.