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

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.

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>

Custom Pagination for DataTables

I want to customize my pagination view for DataTalble for one of my client requirement. I want pagination view same shown in the image.
For this purpose i have modified some code of datables.js.
DataTable.js:
$.extend(extPagination, {
simple: function (page, pages) {
return ['previous', 'next'];
},
full: function (page, pages) {
return ['first', 'previous', 'next', 'last'];
},
numbers: function (page, pages) {
return [_numbers(page, pages)];
},
simple_numbers: function (page, pages) {
return ['previous', _numbers(page, pages), 'next'];
},
full_numbers: function (page, pages) {
return ['first', 'previous', _numbers(page, pages), 'next', 'last'];
},
first_last_numbers: function (page, pages) {
return ['first', _numbers(page, pages), 'last'];
},
custom: function (page, pages) {
return ['previous', _numbers(page, pages), 'next'];
},
// For testing and plug-ins to use
_numbers: _numbers,
// Number of number buttons (including ellipsis) to show. _Must be odd!_
numbers_length: 7
});
In My datatable view i have added sPaginationType as custom.
$('#tblSessionList').DataTable({
"bPaginate": true,
"sPaginationType": "custom",
"bLengthChange": false,
"columnDefs": [
{ "targets": 0, "orderable": true },
{ "targets": 1, "orderable": false },
{ "targets": 2, "orderable": false }
],
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"searching": false,
"scrollX": true
});
By Creating new function i am not able to hide page numbers. Now i am not able to find out how to modify view. Please Help

Hey Mate Here is the solution: http://jsfiddle.net/ishandemon/bbLjzspf/1450/
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">
</table>
</div>
$(document).ready(function() {
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"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"],
["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"],
["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"],
["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"],
["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"],
["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"],
["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"],
["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"],
["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"],
["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"],
["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"],
["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
["Michelle House", "Integration Specialist", "Sidney", "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"]
];
var columnDefs = [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}];
var myTable;
myTable = $('#example').DataTable({
"pagingType": "simple",
language: {
paginate: {
previous: "<",
next: ">"
}
},
data: dataSet,
columns: columnDefs,
"bInfo" : false,
select: 'single',
responsive: true,
altEditor: true, // Enable altEditor
drawCallback: function(){
$('.paginate_button.next', this.api().table().container())
.on('click', function(){
var info = myTable.page.info();
console.log(info) ;
$('.cdatatableDetails').remove();
$('.paginate_button.next').before($('<span>',{
'text':'Page '+ (info.page+1) +' of '+info.pages,
class:'cdatatableDetails'
}));
});
$('.paginate_button.previous', this.api().table().container())
.on('click', function(){
var info = myTable.page.info();
console.log(info) ;
$('.cdatatableDetails').remove();
$('.paginate_button.next').before($('<span>',{
'text':'Page '+ (info.page+1) +' of '+info.pages,
class:'cdatatableDetails'
}));
});
}
});
var info = myTable.page.info();
console.log(info);
$('.paginate_button.next').before($('<span>',{
'text':'Page '+ (info.page+1) +' of '+info.pages,
class:'cdatatableDetails'
}));
});

You can customize the pagination button labels through language.paginate.next and language.paginate.previous.
$('#tblSessionList').DataTable({
language: {
paginate: {
next: '<img src="path/to/arrow.png">',
previous: '<i class="fa fa-fw fa-long-arrow-left">'
}
},
"bPaginate": true,
"bLengthChange": false,
"columnDefs": [
{ "targets": 0, "orderable": true },
{ "targets": 1, "orderable": false },
{ "targets": 2, "orderable": false }
],
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"searching": false,
"scrollX": true
});

After did some research on datatable.js. I found a solution.
HTML:
$('#tblSessionList').DataTable({
language: {
paginate: {
next: '<span class="glyphicon glyphicon-menu-right"></span>',
previous: '<span class="glyphicon glyphicon-menu-left"></span>'
}
},
"bPaginate": true,
"sPaginationType": "custom",
"bLengthChange": false,
"columnDefs": [
{ "targets": 0, "orderable": true },
{ "targets": 1, "orderable": false },
{ "targets": 2, "orderable": false }
],
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"searching": false,
"scrollX": true
});
Here is all you need to change in datatable.js:
$.extend(true, DataTable.ext.renderer, {
pageButton: {
_: function(settings, host, idx, buttons, page, pages) {
var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate;
var aria = settings.oLanguage.oAria.paginate || {};
var btnDisplay,
btnClass,
counter = 0;
var attach = function(container, buttons) {
var i, ien, node, button;
var clickHandler = function(e) {
_fnPageChange(settings, e.data.action, true);
};
for (i = 0, ien = buttons.length; i < ien; i++) {
button = buttons[i];
if ($.isArray(button)) {
var inner;
if (settings.sPaginationType == "custom") {
inner = $(
"<span class='custom-pagination'> Page " + parseInt(page + 1) + " of " + pages + " </span>"
).appendTo(container);
} else {
inner = $("<" + (button.DT_el || "div") + "/>").appendTo(
container
);
attach(inner, button);
}
} else {
btnDisplay = null;
btnClass = "";
switch (button) {
case "ellipsis":
container.append('<span class="ellipsis">…</span>');
break;
case "first":
btnDisplay = lang.sFirst;
btnClass =
button +
(page > 0 ? "" : " " + classes.sPageButtonDisabled);
break;
case "previous":
btnDisplay = lang.sPrevious;
btnClass =
button +
(page > 0 ? "" : " " + classes.sPageButtonDisabled);
break;
case "next":
btnDisplay = lang.sNext;
btnClass =
button +
(page < pages - 1 ? "" : " " + classes.sPageButtonDisabled);
console.log(btnClass)
break;
case "last":
btnDisplay = lang.sLast;
btnClass =
button +
(page < pages - 1 ? "" : " " + classes.sPageButtonDisabled);
break;
default:
// To Button
btnDisplay = button + 1;
btnClass = page === button ? classes.sPageButtonActive : "";
console.log(btnDisplay);
break;
}
if (btnDisplay !== null) {
//
node = $("<a>", {
class: classes.sPageButton + " " + btnClass,
"aria-controls": settings.sTableId,
"aria-label": aria[button],
"data-dt-idx": counter,
tabindex: settings.iTabIndex,
id:
idx === 0 && typeof button === "string"
? settings.sTableId + "_" + button
: null
})
.html(btnDisplay)
.appendTo(container);
// }
_fnBindAction(node, { action: button }, clickHandler);
counter++;
}
}
}
};
// IE9 throws an 'unknown error' if document.activeElement is used
// inside an iframe or frame. Try / catch the error. Not good for
// accessibility, but neither are frames.
var activeEl;
try {
// Because this approach is destroying and recreating the paging
// elements, focus is lost on the select button which is bad for
// accessibility. So we want to restore focus once the draw has
// completed
activeEl = $(host)
.find(document.activeElement)
.data("dt-idx");
} catch (e) {}
attach($(host).empty(), buttons);
if (activeEl !== undefined) {
$(host)
.find("[data-dt-idx=" + activeEl + "]")
.focus();
}
}
}
});

jQuery DataTables plugin: add column headers dynamically

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"
}
]
};

Categories

Resources