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

growlingflea · September 2018

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 · September 2018

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

Kevin

growlingflea · September 2018

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 · May 2019

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


        });

`

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables