Question regarding: Row created callback
Question regarding: Row created callback
boicenet
Posts: 47Questions: 12Answers: 1
I'd like to change the text color of a cell (if possible) based on a condition. For example, if a date is prior to today's date, I'd like to highlight the text in red similar to what is done at this page.
No matter where I place the code within my existing code below, I cause an error. Can anyone tell me if I'm able to achieve what I'd like above and if so, where should I insert the code from the page above?
Code snippet from page above:
$(document).ready(function() {
$('#example').DataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
$('td', row).eq(5).addClass('highlight');
}
}
} );
} );
My existing code:
var assignmentTable = $('#job_assignments').DataTable( {
"iDisplayLength": 12,
dom: "Bfrtip",
ajax: {
url: 'assignments2.php',
type: 'post',
data: (function ( d ) {
var selected = jobTable.row( { selected: true } );
if (selected.any() ) {
d.job_id = selected.data().jobs.job_id;
}
})
},
columns: [
{ data: "job_assignments.job_id" },
{ data: "jobs.job_number" },
{ data: "job_assignments.component" },
{ data: "job_assignments.colors" },
{ data: "job_assignments.quantity" },
{ data: "job_assignments.production_date" },
{ data: "job_assignments.machine_id" },
{ data: "machines.machine_name" },
{ data: "job_assignments.is_completed" }
],
columnDefs: [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
// return data +' - ('+ row.machines.machine_name+')';
return ''+ row.machines.machine_name +'';
},
"targets": 6
},
{ "visible": false, "targets": [ 0, 7 ] }
],
// select: true,
select: {
style: 'single'
},
buttons: [
// { extend: "create", editor: assignmentEditor },
{
extend: "edit", editor: assignmentEditor.disable(['jobs.job_number', 'job_assignments.component'])
},
{
extend: "selectedSingle",
text: "Add Job Component",
action: function ( e, dt, node, config ) {
var rowData = dt.row( { selected: true } ).data();
window.open( ' component_form_create.php?job_id='+rowData.job_assignments.job_id, '_self' );
}
},
{
extend: "remove",
editor: assignmentEditor,
formMessage: function ( e, dt ) {
// var rows = dt.rows( e.modifier() ).data().pluck('jobs.job_name');
var rows = dt.rows( e.modifier() ).data().map( function ( o ) {
return o.job_assignments.component;
} );
return 'Are you sure you want to permanently delete this job component? <ul><li>'+rows.join('</li><li>')+'</li></ul>';
}
}
]
} );
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You need to configure all of your options in the same object. See the initialisation section of the manual.
Allan
Thank you, Allan.
I can get the text to turn red in the correct column, but it's every record. I want to set the red color conditionally comparing the date data to the current date (preferably using a variable). What am I doing wrong in the following code?
That is a string comparison, not a date comparison.
This SO thread and others give details on how you can compare dates in Javascript.
Allan
Allan,
I could not understand what the cellData[5] was containing (in my case a value of 1). Looks like it's not the actual data contained in that row/column. Is the columns, CreatedCell feature the correct one to use for what I'm trying to do?
Thank you.
Perhaps just use
cellData- it is the data for the cell after all.Yes,
columns.createdCellis an approriate place to add a class / style.Allan
Allan,
Thank you for your guidance. There may be a better more optimal way of handling this, but here is what works for me.
```
columnDefs: [