Develop Reference

Data is not populated in data table with array objects, getting blank screen

Data is not populated in data table with array objects, getting blank screen. Tried with below code, any issue pls suggest
$('#example3').DataTable( {
data:storedJsonData,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
]
} );
Fiddle

Data is not populated because columns header is case sensitive and must equal to given data.
I fix your data and columns header. Now it's work and show your data on DataTable.
var storedJsonData = [{
"id": "1",
"name": "abc",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
},
{
"id": "2",
"name": "def",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
}
];
$('#example3').DataTable({
data: storedJsonData,
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "salary"
},
{
"data": "start_date"
},
{
"data": "office"
},
{
"data": "extn"
}
]
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">
</table>

How to display duplicate rows in same color using datatable

I am using DataTable plugin for show rows in table. I want to show duplicate rows in same color.
How i can do this someone pls help me.
In the below example Black Winters we have duplicate row.
I want to show these type of duplicate rows in different colors.
Like I have duplicate data Black Winters and Orange i want to show these both duplicate rows in different color combination eg.: Black Winters color will be red and Orange color will be like blue.
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
}
];
$("#table1").DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

You can make use of below code where you can prepare map of duplicate rows inside 'rowCallback' function and apply color to dupliate rows in applyDuplicateRowColor function once datatable draw get completed
I have used duplicateColor array to pick random color for same rows, you can edit it and add more colors. also using duplicateColorIndex to get next duplicate color for next duplicate data, please make sure you have enough color in the array otherwise it will show arrayindexoutofbound error.
$(document).ready(function() {
var duplicateColor = ['red', 'blue', 'yellow', 'green'];
var len = duplicateColor.length;
var duplicateColorIndex = 0;
var duplicateRowMap = {};
$.fn.applyDuplicateRowColor = function() {
$("#table1 tr").each(function(){
var name = $(this).find('td:eq(0)').text();
var value = duplicateRowMap[name];
if(value!='x') {
$(this).css('color', duplicateColor[value]);
}
});
//reset variables
duplicateColorIndex = 0;
duplicateRowMap = {};
};
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,200"
},
{
"name": "Oranges",
"position": "Project Engineer",
"salary": "$1,100"
},
{
"name": "Oranges",
"position": "Project Engineer",
"salary": "$1,000"
}
];
$("#table1").DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
],
"rowCallback": function( row, data ) {
var name = duplicateRowMap[data.name];
if(name) {
if(name == 'X') {
duplicateRowMap[data.name] = duplicateColorIndex;
duplicateColorIndex++;
if(duplicateColorIndex==len)
duplicateColorIndex = 0;
}
} else {
duplicateRowMap[data.name] = 'X';
}
},
"fnDrawCallback": function( oSettings ) {
$(this).applyDuplicateRowColor();
}
});
//console.log(duplicateRowMap);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

You can implement this using
Using .map() method of array, in map method you just need to append new key with color value based on condition if duplicate row is count is greater then 1 then color will be orange otherwise 'red'.
Now need to use createdRow() method for data table.
See below working code snippet
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
}, {
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
}, {
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
}].map((o,i,arr)=>{
o.color = arr.filter(({name})=>name===o.name).length>1 ?'orange':'red';
return o;
});
$("#table1").DataTable({
data: data,
columns: [{
data: 'name'
}, {
data: 'position'
}, {
data: 'salary'
}],
"createdRow": function(row, data, dataIndex) {
$(row).css("background-color", data.color);
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

First you need to check which elements are duplicates and you need to manage it's status in other array. so in createdRow you can check for duplicate rows.
Check on below link.
https://jsfiddle.net/t2cn571z/
Try below solution.
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Orange",
"position": "Developer",
"salary": "$1,700"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Orange",
"position": "Developer",
"salary": "$1,700"
}
];
//find duplicates values
var array = [];
data.forEach(myFunction)
function myFunction(item, index) {
if( array.length == 0)
{
array.push({"name":item.name,"isduplicate" : 0})
}
else
{
if (array.filter(e => e.name === item.name).length == 0)
/* vendors contains the element we're looking for */
{
array.push({"name":item.name,"isduplicate" : 0})
}
else
{
array = array.filter((e) => e.name !== item.name);
array.push({"name":item.name,"isduplicate" : 1})
}
}
}
$("#table1").DataTable({
data: data,
"createdRow": function ( row, data, index ) {
var dataValue = array.find(x => x.name === data.name);
if ( dataValue.isduplicate == 1 ) {
if(dataValue.name == 'Black Winters')
$(row).css('color','red')
else if(dataValue.name == 'Orange')
$(row).css('color','blue')
}
},
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

A little bit messy but it does what you need mostly. For a unique color for each set of different data you would need to created a random color variable and put that on the row instead of a class like I did. This is not very extendable but if you know how many columns then this works fine.
Good luck.
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
}
];
$("#table1").DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
]
});
});
$(document).ready(function() {
// Search the table for doubles.
function SearchForDoubles() {
var table = $("#table1 tbody tr");
var counter1 = 0;
var counter2 = 0;
var tr_currentName = "";
var tr_newName = "";
var tr_currentPosition = "";
var tr_newPosition = "";
var tr_currentSalary = "";
var tr_newSalary = "";
table.each(function() {
// set the current tr html data
tr_currentName = $(this).find("td:nth-child(1)").html();
tr_currentPosition = $(this).find("td:nth-child(2)").html();
tr_currentSalary = $(this).find("td:nth-child(3)").html();
table.each(function() {
tr_newName = $(this).find("td:nth-child(1)").html();
tr_newPosition = $(this).find("td:nth-child(2)").html();
tr_newSalary = $(this).find("td:nth-child(3)").html();
/*
console.log(counter1 +"!="+counter2);
console.log(tr_currentName +"=="+tr_newName);
console.log(tr_currentPosition +"=="+tr_newPosition);
console.log(tr_currentSalary +"=="+tr_newSalary);
*/
// check if there is a match
if (counter1 != counter2 &&
tr_currentName == tr_newName &&
tr_currentPosition == tr_newPosition &&
tr_currentSalary == tr_newSalary
) {
// highlight the row
$(this).addClass("doubleRecord");
}
counter2++;
});
counter2 = 0;
counter1++;
});
}
SearchForDoubles();
});
.doubleRecord {
color: orange;
font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

There is option createdRow on datatable. You may check condition inside that option and add desire CSS.
Update: createdRow with initComplete and some logic do this for dynamic data. I edit answer after comment.
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$1,120"
},
{
"name": "Shree",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
}
];
var names = [];
var dupliacteName = [];
$("#table1").DataTable({
data: data,
"createdRow": function(row, data, index) {
let name = data.name;
if (names.indexOf(name) > -1) {
dupliacteName.push(name);
}
$(row).attr('data-val', name).css({
"color": "orange"
});
names.push(name);
},
"initComplete": function(settings, json) {
$.each(dupliacteName, function(index, name) {
$("[data-val='" + name + "']").css({
"color": "red"
});
});
},
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>

How to load a jQuery.DataTables grid with dynamic JSON data

I'm trying to load some simple JSON data into a jQuery.DataTables (datatables.net), The grid is showing up as it is defined in the HTML, but does not change based on the new data.
What am I missing? any suggestion?
HTML:
<table id="example" class="display" style="width:100%;">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
</tr>
</tbody>
JavaScript: (jQuery and jQuery.DataTables are loaded)
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
});
});

Your column data should be set of Array. Something like this
$(document).ready(function () {
$("#example").DataTable({
data: [{ Id: "1" }, { Id: "2" }],
columns: [{ data: "Id", title: "ID" }]
});
});
For Dynamic Data using ajax
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
JSON txt file
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
More detail Here

Try this
var options = {
data: [{ Id: "1" }, { Id: "2" }],
columns: { data: "Id", title: "ID" }
}
var dataTable = $("#example").DataTable(options );
// Reload and refresh
dataTable.draw();

So, the my code for injecting the JSON data (or as a variable) is fine, the problem was another click event for the grid that I forgot I added before the initialization of that grid (bad bad me)
$("#example " + "tbody").on("click", "tr", function () {
var data = table.row(this).data();
isDebug && console.log('You clicked on ' + data[0] + '\'s row');
isDebug && console.log(data);
});

Update datatable using an array of objects

I have an array of objects below.
var arrayObjects= [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
The array is dynamically updated, through some API calls that my app makes.
I instantiate a datatable as shown.The array at this point, the arrayObjects is empty.
HTML
<table id="myTable" class="table table-striped table-dark">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
</tr>
</thead>
</table>
JAVASCRIPT
var myDataTable=$('#myTable').DataTable( {
data: arrayObjects,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );
I add new objects in the array as follows:
EDIT: somedata can be as follows:
var somedata = {
"name": "James",
"position": "CEO",
"salary": "$13,140",
"start_date": "2017/04/25",
"office": "London",
"extn": "54211"
}
arrayObjects.push(somedata);
How do I add data to the table/update the table after that?
I have tried:
myDataTable.clear().row.add(arrayObjects).draw();
but it doesn't seem to work. The Table is still empty.

The problem is in using row API instead of rows API because you are storing as an array of objects.
Change it to
myDataTable.clear().rows.add(arrayObjects).draw();
Working jsfiddle.
To work with row API you have to change the arrayObjects either as a simple array or single object like below
var arrayObjects = ['James', 'CEO', '$13000', 'London'];
// or
var arrayObjects = {
"name": "James",
"position": "CEO",
"salary": "$13,140",
"office": "London"
};
// it will work now
myDataTable.clear().row.add(arrayObjects).draw();

DataTables - modal display - icons not displaying

I am trying to develop the following functionality,
https://datatables.net/extensions/responsive/examples/display-types/modal.html
I followed the exact same steps but, I am not getting the icons to launch the modal dialog,
Here is the complete code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var dataset = {
"data": [
{
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
},
{
"first_name": "Angelica",
"last_name": "Ramos",
"position": "Chief Executive Officer (CEO)",
"office": "London",
"start_date": "9th Oct 09",
"salary": "$1,200,000"
},
{
"first_name": "Ashton",
"last_name": "Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"start_date": "12th Jan 09",
"salary": "$86,000"
},
{
"first_name": "Bradley",
"last_name": "Greer",
"position": "Software Engineer",
"office": "London",
"start_date": "13th Oct 12",
"salary": "$132,000"
},
{
"first_name": "Brenden",
"last_name": "Wagner",
"position": "Software Engineer",
"office": "San Francisco",
"start_date": "7th Jun 11",
"salary": "$206,850"
},
{
"first_name": "Brielle",
"last_name": "Williamson",
"position": "Integration Specialist",
"office": "New York",
"start_date": "2nd Dec 12",
"salary": "$372,000"
},
{
"first_name": "Bruno",
"last_name": "Nash",
"position": "Software Engineer",
"office": "London",
"start_date": "3rd May 11",
"salary": "$163,500"
},
{
"first_name": "Caesar",
"last_name": "Vance",
"position": "Pre-Sales Support",
"office": "New York",
"start_date": "12th Dec 11",
"salary": "$106,450"
},
{
"first_name": "Cara",
"last_name": "Stevens",
"position": "Sales Assistant",
"office": "New York",
"start_date": "6th Dec 11",
"salary": "$145,600"
},
{
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior Javascript Developer",
"office": "Edinburgh",
"start_date": "29th Mar 12",
"salary": "$433,060"
}
]
}
$.each(dataset.data, function (i, item) {
item.age = Math.floor((Math.random() * 70) + 1);
item.extn = Math.floor((Math.random() * 1000) + 1);
})
$('#example').DataTable({
"paging": false,
"info": false,
"filter": false,
"paging": false,
retrieve: true,
"processing": true,
data: dataset.data,
columns: [{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": "extn" }],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
alert(row.data.length)
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
});
</script>
</head>
<body>
<table width="100%" class="table table-striped table-bordered nowrap" id="example" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Output:
You can even copy and paste the entire code in an HTML file and run it to see the behavior.
I am not seeing any errors in the console. I tested with IE 11 and Chrome.
Any suggestions / directions are greatly appreciated.
Edit:
Snapshot from jsbin.com/hehewiz/edit?html,output. (link created by bazzells)

The icons are hidden on a wide screen due to the collapsed class being removed from the table. The collapsed class is toggling based on the window width currently.

Your code is working just fine, when the screen gets smaller and at least one columns becomes hidden, the (+) icon appears.
This is because this option is for responsive display of information.