jQuery DataTables plugin: add column headers dynamically - javascript

I am interested in creating a function that creates DataTables dynamically with the Data parameter passed in the function.
Below is what I wrote so far, the DataTables can add rows dynamically, but not the column header - can use some help here (I've read the DT API, but didn't find much help there).
var table2 = $('#example2').DataTable({
"paging" : true,
"ordering" : true,
});
// header row
table2.columns().header(data["header"]).draw();
// create rows
for (var prop in data["staff"]) {
table2.row.add([
data["staff"][prop].name,
data["staff"][prop].position,
data["staff"][prop].office,
data["staff"][prop].age,
data["staff"][prop].Start_date,
data["staff"][prop].salary
]).draw();
}
The Data passed into the function:
var data = {
"header": [
"Name",
"Position",
"Office",
"Age",
"Start_date",
"Salary"
],
"staff": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"age": 61,
"Start_date": "2011/04/25",
"salary": "$320,800"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"office": "Tokyo",
"age": 63,
"Start_date": "2011/07/25",
"salary": "$170,750"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"age": 66,
"Start_date": "2009/01/12",
"salary": "$86,000"
}
]
};

Related

How do I add a class to THEAD created by datatables?

I am creating a datatable using javascript. The application itself uses bootstrap and all tables are currently styled by adding the "thead-dark" class to . However datatables does not add this class when generating using sourced data. I went through datatables documentation but could not find a solution already builtin. So I went to google and tried a few different things, but no success. I am skilled with PHP but I do not have much experience with Javascript. And since this table is to be used as a document manager, PHP is not very well suited for this job. Because I would need to reload the page all the time.
Thanks for your help!
HTML:
<div class="tab-pane" id="documents">
<div class="table-responsive">
<table id="documents_tbl" class="table table-hover table-striped table-bordered dt-responsive" style="width:100%"></table>
</div>
</div>
JAVASCRIPT:
<script>
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
$(document).ready(function() {
$('#documents_tbl').DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
});
</script>
I suppose you just want to add a class to a table after datatables has rendered.
You can just call this after the datatable call:
$('#documents_tbl thead').addClass('thead-dark');
Don't forget if you added the stylesheet of Datatables, some things could interfere with this.
You can add the class after the table is initialized.
$('#documents_tbl_wrapper thead tr th').each(function () { $(this).addClass('thead-dark') })

DataTables jQuery plugin : sort and pagination disabled when mixed with vue.js

I have very simple example of DataTables jQuery plugin with a simple javascript source that is rendered before a basic Vue.js binding:
JavaScript:
var aDemoItems =[
{
"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"
},
{
"name": "Vivou fou",
"position": "Lazy nephew",
"salary": "$7,300",
"start_date": "2010/04/22",
"office": "Edinburgh",
"extn": "8422"
}
]
$('#missionTable').DataTable({
data: aDemoItems,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
});
var app = new Vue({
el: '#app',
data: {
name: packageName,
path: packagePath,
data: missionsData
}
})
HTML:
<table id="missionTable" class="display" width="100%"></table>
It seams to work but search, sorting, nb item display and pagination are disabled if Is use vue.js in spite of no error appears in console
Do you know what is wrong and how use Datatable and vue.js at same time?

button click not firing from datatable row

I'm using Datatables to display data in a table and I'm trying to create a button for each row and catch click event using columns.render.
I created the button using JQuery and tried to add a click event which doesn't seem to be working
I know there are other methods to do this, but why this method doesn't work?
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];
$('#example').DataTable({
data: dataSet,
responsive: true,
columns: [{
title: "Name"
},
{
title: "Position"
},
{
title: "Office"
},
{
title: "Extn."
},
{
title: "Start date"
},
{
title: "Salary"
},
{
"render": function(data, type, row, meta) {
var button = $('<button/>', {
html: "Click!"
});
button.click(function() {
alert("Click event working");
});
return button[0].outerHTML;
}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" width="100%"></table>
The issue is because the render logic is building a new element from the string you provide. This means that, although you attach a click handler to the element, it's lost as the jQuery object is not used to append the new content.
To fix this, you can use a delegated event handler on the button elements:
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];
$('#example').DataTable({
data: dataSet,
responsive: true,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" },
{
"render": function(data, type, row, meta) {
return '<button data-name="' + row[0] + '">Click!</button>';
}
}
]
});
$('#example').on('click', 'button', function() {
console.log($(this).data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" width="100%"></table>

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();

How to use (add) Row created callback in Javascript sourced data

I have created a table with jquery.dataTable :
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
I want to use Row created callback to highlight the salary more than $150000. How can I do this?
You can use this code:
First, replace , and the symbol $ for parse to float value.
Second compare the result and add tag <b>.
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary",
"render": function ( data, type, row ) {
var salary;
salary = parseFloat(data.replace(',','').replace('$',''));
console.log(salary);
if (salary > 150000){
return "<b>" + data + "</b>";
}else{
return data;
}
},
}
],
} );
Result: https://jsfiddle.net/cmedina/7kfmyw6x/52/
Another alternative (though #CMedina's approach works) is to use a rowCallback which will allow you to alter the whole row and highlight it. Like this:
"rowCallback": function(row, data, index){
if(numeral().unformat(data[5]) > 150000){
$(row).addClass("highlight");
$('td:eq(5)', row).html("<b>" + data[5] + "</b>");
}
}
I've included numeral.js to make the parsing easier. Working JSFiddle.

Categories

Resources