Use Jquery on a datable that is created from an Ajax call

growlingflea

I have a datatable that is getting its data from an ajax call. I want to change the css on certain cells based on the value (YES, NO, BLANK) on cells of a certain class. Here is part of my table:

`

    oTable=$('#show_sms_table').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            ajax:{ type: "POST",
                url: "../../library/ajax/sms_notification_log_report_ajax.php",
                data: {
                    func:"show_sms_sent",
                    to_date:   "<?php echo $form_to_date; ?>",
                    from_date:" <?php echo $form_from_date; ?> "
                }
            },
            columns:[
                { 'data': 'iLogId'  ,   },
                { 'data': 'lastUpdate', },
                { 'data': 'pid'        },
                { 'data': 'eventDate'       },
                { 'data': 'full_name'},
                { 'data': 'phone_cell'},

                    { className: "hipaa_allowsms", 'data': 'hipaa_allowsms'},

                { 'data': 'ptSMS'},
                { 'data': 'relation1sms'},
                { 'data': 'relation2sms'},
                { 'data': 'relation3sms'},
                { 'data': 'relation4sms'},
                { 'data': 'teenConfidential'},
                { 'data': 'message'},
                { 'data': 'sentTo'},
                { 'data': 'dSentDateTime'},
                { 'data': 'alert_error_class'}

            ],
            "iDisplayLength": 100,
            "select":true,
            "searching":true,
            "retrieve" : true
        });

`
Before I started using Datables, I used a table and the following script accomplished what I wanted to do

`

     $("#sms_log_table tr").each(function() {


                //color code the contact permissions
                $(this).find(".hipaa_allowsms").each(function(){

                    var hipaa_allowsms = $(this).text().replace(/\s/g, "");
                    if(hipaa_allowsms === "YES"){
                        $(this).css('color', 'green');

                    }else if (hipaa_allowsms === "NO") {
                        $(this).css('color', 'red');

                    }else{
                        $(this).text("X").css('color', 'rgb(219, 84, 17)');
                    }

                });
            });

`
Basically, I want to iterate through each row and each cell of a particular class, and change the color of the text based on the value of the cell. Thanks for advice!!

kthorngren

Sounds like you want the columns.createdCell option. But you could also try createdRow or drawCallback.

Kevin

growlingflea

It looks like the drawCallback option might be helpful. I'm going to take a stab at it and report back. Thanks for the advice.

growlingflea

Its been a while since I've logged in but I was able to do the following. I'll post all my code so people needing help can see what I did.

`$(document).ready(function() {

        var oTable;

        oTable=$('#show_sms_table').DataTable({
            dom: 'Bfrtip',
            autoWidth: false,
            scrollY: false,
            fixedHeader: true,
            buttons: [
                'copy', 'excel', 'pdf', 'csv'
            ],
            ajax:{ type: "POST",
                url: "../../library/ajax/sms_notification_log_report_ajax.php",
                data: {
                    func:"show_sms_sent",
                    to_date:   "<?php echo $form_to_date; ?>",
                    from_date:" <?php echo $form_from_date; ?> "
                },

            },

            columns:[
                { 'data': 'iLogId'},
                { 'data': 'lastUpdate' },
                { 'data': 'pid'        },
                { 'data': 'eventDate'       },
                { 'data': 'pc_title'       },
                { 'data': 'full_name'},
                { 'data': 'phone_cell'},
                { class: "hipaa_allowsms", 'data': 'hipaa_allowsms'},
                { 'data': 'ptSMS', 'width' : '1px'},
                { 'data': 'relation1sms' },
                { 'data': 'relation2sms'},
                { 'data': 'relation3sms'},
                { 'data': 'relation4sms' },
                { 'data': 'to_number', visible:false},
                { 'data': 'dSentDateTime'},
                { 'data': 'alert_error_class'},
                { 'data' :'pc_sendalertsms', 'visible' : false},
                { 'data' :'smsResponse', 'visible' : false}

            ],

            "columnDefs": [

                {className: "compact details-control", "targets": [ 0 ] },
                { className: "details-control", targets: "_all" },





                {
                //These are the hipaa permission columns
                "targets": [7,8,9,10,11,12],

                "createdCell": function (td, cellData, rowData, row, col) {
                    if (cellData === "NO"){
                        $(td).text("N").css('color', 'rgb(219, 84, 17)');
                        $(td).css('color', 'red');

                    }else if(cellData === "YES"){

                        $(td).text("Y").css('color', 'rgb(219, 84, 17)');
                        $(td).css('color', 'green');

                    }else{

                        $(td).text("X").css('color', 'rgb(219, 84, 17)');
                    }

                    $(td).css('padding', '10px');



                }
            },



                {
                    //AlertSent Status
                    "targets": [17],
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if(cellData === "NO"){
                            $(td).parent().css( "background-color", "rgb(174,158,158)" );
                        }

                    }

                }





            ],
            "rowCallback": function( row, data ) {

                if(data['pc_sendalertsms'] === "NO"){

                    $(row).css( "background-color", 'rgb(174,158,158)' );
                }

                if(data['to_number'] === "Confidential"){

                    $(row).css( "background-color", 'rgb(253,253,153)' );
                }

                //This handles the response.
                var dataArray = data['smsResponse'];
                //smsResponse is an array
                if(dataArray.length > 0){
                    $(row).css( "font-weight" , "bold" );

                }

                if(data['alert_error_class'] == "error"){

                    $(row).css( "background-color", 'rgb(255,107,107)' );

                }



                },
            "iDisplayLength": 100,
            "select":true,
            "searching":true,
            "retrieve" : true


        });

`