Question regarding: Row created callback

boicenet

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>';
                        }
                    }


                ]
            } );

allan

You need to configure all of your options in the same object. See the initialisation section of the manual.

Allan

boicenet

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?

    columnDefs: [

           {
                     "targets": 5,
             "createdCell": function (td, cellData, rowData, row, col) {
                if (cellData[5] < "2016-11-17") {
                    $(td).css('color', 'red');
                }
            }
        },

allan

cellData[5] < "2016-11-17"

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

boicenet

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.

allan

Perhaps just use cellData - it is the data for the cell after all.

Yes, columns.createdCell is an approriate place to add a class / style.

Allan

boicenet

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: [

    {
        "targets": 5,
        "createdCell": function (td, cellData, rowData, row, col) {

            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; //January is 0!
            var yyyy = today.getFullYear();

                if(dd<10) {
                    dd='0'+dd
                }

                if(mm<10) {
                    mm='0'+mm
                }

                today = yyyy+'-'+mm+'-'+dd;

                f (cellData < today) {
                $(td).css('color', 'red');
            }
                }
        },