Develop Reference

datatable.js ajax livereload after n seconds

I want to reload a datatable after n amount of seconds.
$(document).ready(function() {
var table = $('#table_id').DataTable( {
"ajax": "http://192.168.1.134:8000/api/",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "city" },
],
}
);
} );
setInterval(function(){
table.ajax.reload(null, false);
},5000);
But the total row in the table keeps being the same.

I find the answer in the Documenation
var table = $('#table_id').DataTable( {
"ajax": "http://192.168.1.134:8000/api/",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "city" },
],
}
);
setInterval( function () {
table.ajax.reload(); // user paging is not reset on reload
}, 30000 );

Show key as value in datatable

Hi I'm currently having trouble with datatable. My datasource is object and I want every first key in the object displayed as value in datatable. Here is my code.
var my_data = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function() {
$('#example').DataTable( {
data:my_data,
columns: [
{ data: 'content'
}
]
} );
} );
What output I expect is this.
| Content |
-------------
data_v1
data_v2
data_v3
Note: As long as posible, I don't want to use forloop or any kind of loop. TIA
Any help will be so much appreciated.

Try
var myData = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function()
{
$('#example').DataTable( {
data: Object.keys(myData["content"]),
columns: [
{ title: 'content'
}
]
});
});
Object.keys will return an array of keys from the data provided

This answer is from #colin of Datatable.
$(document).ready(function() {
var my_data = {
"contents": [{
"data_v1": [{
"id": 1
}]
},
{
"data_v2": [{
"id": 2
}]
},
{
"data_v3": [{
"id": 3
}]
}
]
};
var table = $('#example').DataTable({
data: my_data.contents,
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
return (Object.keys(row)[0]);
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example"></table>

How to multiply Data in Datatables?

How do I multiply Data in Datatables ?
I have Datatables and javascript that look like this:
$('#xxdata').DataTable( {
"destroy": true,
"processing": true,
"ajax": {
url : "xxreport.php",
type : 'GET',
data : {
datedari : SplitRange[0].trim(),
datesampai : SplitRange[1].trim()
}
},
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit"}
]
} );
I want to multiply data in { "data": "profit"} maybe like
this { "data": "profit" * 0.7}
Can I change data in datatables as I want? Or can anyone give other solutions?
Thank You.

You can use the columns.render option (documented here) to do this.
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit",
"render": function (data) {
return data * 0.7;
}
}
]
In this case, data in the function signature represents the data for the cell. There are other options that can be passed into the function, but in your case these do not need to be included since this is such a simple operation. See the documentation link if you ever want to expand to a more complicated rendering function

You must add a render to your column, something like this:
{ "data": "profit", "render": renderMyProfit}
and you should have the rendering function declared before you call the .DataTable() function.
var renderMyProfit = function (data, type, row, meta) {
var renderContent = "<div>*</div>";
return renderContent.replace("*", row.profit * 0.7);
};

jquery Datatables using JSON

I am using datatables jQuery plugin to show the data nicely withing a table. I am making an ajax request on a click of a button which is then running a php script returning a JSON.
Here's how my code:
$('#searchInSugar').button().on('click', function (e) {
var searchTxt = $('#searchEntry').val();
var moduleName = $('#moduleSelect').val();
if (!searchTxt.trim() || searchTxt.length === 0) {
alert("Please provide some search text string..");
return false;
}
if (moduleName === "select") {
alert("Please select a module..");
return false;
}
$.ajax({
type: 'POST',
url: "fetch_records.php",
data: {"searchText": searchTxt,
"module": moduleName},
success: function (data) {
obj = JSON.parse(data);
$(document).ready(function () {
$('#dialog_entry_table').DataTable({
"info": false,
data: data,
columns: [
{"records": "id"},
{"records": "name"},
{"records": "account_name"}
]
});
});
},
error: function (exception) {
alert('Exeption:' + exception);
}
});
});
Here's the json that I get from the php script.
{
"next_offset":-1,
"records":[
{
"id":"a54e81f8-72b2-ae9b-d526-5608761a28e8",
"name":"Mr. James Smith",
"date_modified":"2015-09-27T23:52:29+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"b8ec2e0a-ade1-f70f-d722-56098e5c4370",
"name":"james bond",
"date_modified":"2015-09-28T22:50:56+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"4de93888-155c-7e59-9c4b-56058f1b7ce9",
"name":"Mr. James Bond",
"date_modified":"2015-09-28T01:50:49+00:00",
"account_name":"OSSG",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
}
]
}
Now, I ONLY WANT TO SHOW id, name and account_name IN THE TABLE, But I am having a hard time achieving this, could someone help/advise what I am doing wrong here.
This is the error I am getting:

Try:
var dt = [];
$.each(data.records,function(i,v) {
dt.push([v.id,v.name,v.account_name]);
});
$('#dialog_entry_table').DataTable({
"info": false,
data: dt,
columns: [
{"title": "id"},
{"title": "name"},
{"title": "account_name"}
]
});
jsfiddle: https://jsfiddle.net/bwqfq2gr/1/

loading data in datatable on onchange event

I want to implement function in which data will be loaded into datatable after onChange event. So for that I am trying to implement code as below.
var viewdatatab = $('#dataTablesFeedback').dataTable({
"columns": [
{ "data": "resourceId" },
{ "data": "feedbackRecommendation" },
{ "data": "technicalSkillGaps" },
{ "data": "technicalAvgSkills" },
{ "data": "feedbackType" },
{ "data": "feedbackId" },
{ "data": "isNew" },
]
});
Which is creating my datatable layout and I am calling below function on dropdown change event is :
function loadFeedback(){
viewdatatabJS = $('#dataTablesFeedback').dataTable({
"processing" : true,
"retrieve" : true,
"ajax" : "/nhp/rest/feedback/viewFeedback",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "userName", "value":employeeId } ,
{ "name": "resourceId", "value":mentorDataJson[$('#dropDownId').val()].resourceId });
},
});
}
Where I am passing some parameter in aoData.push but my URL is not getting called.

I Solved the issue by simply implementing datatable properties. i wrote my code of datatable
var viewdatatab = $('#dataTablesFeedback').dataTable({
"columns": [
{ "data": "resourceId" },
{ "data": "feedbackRecommendation" },
{ "data": "technicalSkillGaps" },
{ "data": "technicalAvgSkills" },
{ "data": "feedbackType" },
{ "data": "feedbackId" },
{ "data": "isNew" },
]
});
in jsp document.ready(function()) and then on my request call of drop down change event i wrote below code on my javascript function.
$.ajax({
url : "",
type: 'GET',
contentType: "application/json",
data: {
'userName': value,
'resourceId' : value,
},
success: function(data) {
var table = $('#dataTablesFeedback').DataTable();
table.clear();
table.rows.add(data.data);
table.draw();
});
this way i first clear my datatable and then redraw it using my json which i got from my ajax call.
Thanks