Add a class to a cell depending on data value - javascript

I have a datatable
<table data-bind="dataTable: {
data: items,
options: {
bPaginate: false,
aaSorting: [[0, 'desc']],
aoColumns: [
{ sClass: 'date', mDataProp: 'date' },
{ mDataProp: 'time' },
{ sClass: 'name', mDataProp: 'name' },
{ sClass: 'thought', mDataProp: 'thought' }
]
}
}">
there is also another value in the items that I don't display (thought type).
I want to change the class of the cell 'thought' depending on the value of 'thought type'.
So if thought type is new idea I want the cell that displays the value of 'thought' to be yellow.
Is this possible with datatables?

Add a function
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "is wat you needed" ) {
sReturn = "add style to your element";
}
return sReturn;
}
Go through the example shown in below link
http://datatables.net/examples/data_sources/js_array.html
You can see that the A alphabet is bold compared to others..Hope this solves your problem

This Solution help fix my problem might help u.
for more info check this link: columns.createdCell
Using createdCell manipulate the DOM within columnDefs options.
For example,
"columnDefs": [
{
"targets": [1] // first CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
},{
"targets": [2] //second CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
} ],

Take a look at fnRowCallback in the API. For any given row, this can respond to that row just after drawing it and adjust the row as needed based on the data of that row. For example, something like this might work:
'fnRowCallback' : function(row, data) {
if (data[0] === 'someValue') {
$('td:eq(0)', row).addClass('someClass');
}
}

Related

Can't change style value on second page using DataTable

At the first Page I can see negative value (e.g. -11) being changed to red.
However, when I clicked to the second page, negative value didn't change to red.
My code as below:
$("#listReport").DataTable({
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1]
}]
});
$('#listReport tbody td').each(function (index) {
var qtyvalue = $(this).html();
if (qtyvalue < 0) {
$(this).wrapInner('<strong style="color:red"></strong>');
}
});
Any idea what to change in my code so that pagination works well with color change of the negative values?
You can use columns.render instead of manually trying to do it. Try this
$("#listReport").DataTable({
'aoColumnDefs': [
{
'bSortable': false,
'aTargets': [-1]
},{
'targets': [1], // target column
"data": 1, // column index
"render": function ( data, type, row, meta ) {
if( type === 'display' ){
return '<strong style="color:red">'+data+'</strong>';
}
return data;
}
}
]
});

Populate a datatable starting from the second column

I have a datatable that retrieves json data from an api. The first column of the table should only contain a checkbox. However, when retrieving the data it populates the first column as well.
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
$('#parametrictable').DataTable({
data : json.data,
columns : json.columns,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
})
});
Is there any way that I can set that the data should only populate starting from the second column, leaving the first column to only contain the checkbox?
You can fix this issue by updating the api or in your js code just updating the data key value to null for first object in the json.columns array like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
json.columns[0].data = null;
json.columns[0].defaultContent = '';
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
.... your rest of code
})
});
EDIT:
I meant what your suggestion only did was hide the data that was overlapping with the checkbox. I don't want it hidden. I want the first column to be, by default, only checkboxes. and the overlapping data should be on the 2nd column.
You can update your API like this to achieve that:
"columns": [
{
"data": null,
"defaultContent": ""
},
{
"data": "DT_RowId",
"title": "Id"
},
{
"data": "supplier",
"title": "supplier"
},
{
"data": "color",
"title": "color"
}
],
Or, you can update your code without modifying your API like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
// Add object for checkbox at first position
json.columns.unshift({"data": null, "defaultContent": ""});
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
....your rest of code
})
});

DataTables: Using AJAX, count how many rows in total have a specific value in a cell

My code is:
var table1 = $('#view-table').DataTable( {
fixedHeader: true,
"search": {
"smart": false
},
"columnDefs": [
{
"targets": [ 0,16 ],
"visible": false,
"bSearchable": true
},
{
"orderable": false,
"targets": [ 1,15 ]
}
],
"createdRow": function( row, data, dataIndex ) {
if ( data[16] == "yes" ) {
$(row).addClass('warning');
}
if ( data[0] == "yes" ) {
$(row).removeClass('warning');
$(row).addClass('success');
}
},
"ajax": '/getViewData',
"pageLength": 25
});
I have looked at jQuery How to count the no of rows in table by distinct column value but it only brings back what's on the screen at the time.
What I need is to see how many rows have the value of 'yes' in the 16th column for all the data that is brought back. Not just the data is on the screen. Everything.
All the examples I've tried, as the one above, only work where it's not AJAX based
I have the same problem a few weeks ago, I'm not sure if this is the best solution but it did the work then:
var count = table1.rows(function(idx, data, node) {
return data[16] == 'yes'
}).count();
EDIT: If you want that count after the ajax ends, you can user initComplete
initComplete: function(row, data, index) {
var count = table1.rows(function(idx, data, node) {
return data[16] == 'yes'
}).count();
console.log('count: ', count);
}, // initComplete()
EDIT 2: add jsfiddle
You should probably use ajax callback.
Instead of this "ajax": '/getViewData' do this:
"ajax": {
"type": "GET",
"url": "/getViewData",
"dataSrc": function(json){
//Count your rows here
return json.data;
}
}

add tooltip to specific column of datatables

I have table defined in html as <table id="tableDynamic"></table>
And I am updating table dynamically as
$('#tableDynamic').DataTable( {
columns: [
{ title: data[0] },
{ title: data[1] },
{ title: data[2] },
],
"columnDefs": [
{
"render": function (data, type, row){
return '<a>' + row[0] +'</a>';
},
"targets": 0
},
]
} );
}
How can I add tooltip just to specific column data[2]
You could also do it like this (call any other javascript after Datable initialisation is complete):
$('#tableID').DataTable({
[...]
fnDrawCallback: function(oSettings, json) {
//Call JS here
alert( 'DataTables has finished its initialisation.' );
tooltip('.selector', 'theme');
}
});
I asked a somewhat similar question here. Look at YouneL answer for more details, and an example to do the same with a call back.

Using jQuery, how to check whether a table cell is empty or not?

Using jQuery, how to check whether a table cell is empty or not?
Please help me.
What do you mean by empty.
//cell maycontain new lines,spaces,&npsp;,... but no real text or other element
$("cellselector").text().trim()=="";
or
//cell has no child elements at all not even text e.g. <td></td>
$("cellselector:empty")
You can use CSS selectors with the $ function to get a reference to the cell's element, and then use the html function to see whether it has any contents. For instance, if the cell has an ID "foo":
if ($("#foo").html()) {
// The cell has stuff in it
}
else {
// The cell is empty
}
Try this:
$content = $('#your_cell_id_here').html();
if($content == '')
{
// yes it is empty
}
else
{
// no it is not empty
}
You can use the trechnique I posted here
http://www.keithrull.com/2010/06/09/HowToChangeTableCellColorDependingOnItsValueUsingJQuery.aspx
You can use this if you already know the id of the cell you want to check
$valueOfCell = $('#yourcellid').html();
or you can iterate on the cells of the table
$("#yourtablename tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var valueOfCell = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (valueOfCell == ''){
//place action here
}
else{
//place action here
}
});
You could add css classes to your table and its rows and columns, then use jquery selectors to get the table item:
if ( !($('#mytable tr.row-i td.column-j').html()) ) { alert("empty"); }
for datatables, you may use the following
var missedClockoutDataTable = $("#missedClockoutsDatatable").DataTable({
"order": [[0, "asc"]],
"serverSide": true,
"processing": true,
responsive: true,
destroy: true,
select: true,
fixedHeader: {
header: true,
headerOffset: $('#fixed').height()
},
buttons: [
{extend: 'copy', className: 'ui button'},
{extend: 'csv', className: 'ui button'},
{extend: 'excel', className: 'ui button'},
{extend: 'pdf', className: 'ui button'},
],
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
"ajax": {
"url": "{{url('workplace/dashboard/employees/missed-clockouts')}}",
data: function (d) {
d.gender = $("#gender").val();
d.roles = $("#roles").val();
},
},
"columns": [
{data: 'full_name', name: 'full_name'},
{data: 'clock', name: 'clock'},
{data: 'in', name: 'in'},
{data: 'out', name: 'out'},
{data: 'numberofHours', name: 'numberofHours'},
{data: 'clockoutReason', name: 'clockoutReason'},
{data: 'action', name: 'action'},
],
//when the table has fully loaded, proceed with looping through each row except the first one and then delete the rows if the IN column cell is empty
"initComplete": function(settings, json) {
// if the in type is empty, then hide that row
$("#missedClockoutsDatatable tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var valueOfCell = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (valueOfCell == ''){
console.log(222);
this.remove();
}
});
}
});

Categories