Data Sorting removes conditional formatting of table cells.

mikebroadway

I have just started to use datatables, and I have run into an issue. When I am sorting on columns that are formatted in rowCallBack, I lose the conditional formatting. I'm not sure how to change it. Thoughts?

             $('#example').DataTable({
                columns: [
                    { data: "cer" },
                    { data: "desc" },
                    { data: "approve" },
                    { data: "invoiced" },
                    { data: "balance" },
                    { data: "appnetreimb" },
                    { data: "reimbursed" },
                    { data: "closed" },
                    { data: "overunderflag" }
                ],
                colReorder: true,
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel','print','colvis','pageLength'
                ],
                responsive: true,
                columnDefs: [
                    { width: 50, targets: 0 },
            
                    {
                        targets: [2,3,4,5,6],
                        className: 'dt-body-right'
                    },
                    {
                        targets: [7],
                        className: 'dt-body-center'
                    },
                    {
                        targets: [8],
                        className: 'dt-body-center'
                    }
                ],
                rowCallback: function (row, data, index) {
       
                    switch (data.closed) {
                        case 'False':
                            coloring = 'table-danger';
                        break;

                        case 'True':
                            coloring = 'table-success';
                        break;
                        default:
                            coloring = 'table-warning';
                    } 

                    var i = 0;
                    for (i == 0; i < 9; i++) {

                        var tester = $(row).find('td:eq(' + i.toString() + ')').text();
                        if (tester == data.closed) {
                            $(row).find('td:eq(' + i.toString() + ')').addClass(coloring); 
                        }

                    }

                    if (parseFloat(data.overunderflag) < -.05) {
                        coloring = 'table-warning';

                    } else if (parseFloat(data.overunderflag) > .05) {
                        coloring = 'table-danger';
                    } else if (data.overunderflag == 'Pending') {
                        coloring = 'table-primary';
                    }
  

                    var i = 0;
                    for (i == 0; i < 9; i++) {

                        var tester = $(row).find('td:eq(' + i.toString() + ')').text();
                        if (tester == data.overunderflag) {
                            $(row).find('td:eq(' + i.toString() + ')').addClass(coloring);
                        }

                    }


                        
                    
                },
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],


            });  


       

kthorngren

Nothing obvious stands out. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mikebroadway

I think I figured out the problem. I believe when I sort on a column, the column gets a class to "highlight" that column. I think that class is overwriting the bootstrap class I am using to conditionally format the cell. Is there a way to turn off that highlight?

EDIT: This was it!. I was using the display class on the table. I changed it to class="stripe hover row-border" which removes the sorted column highlighting feature.

tangerine

You can disable the sorting column color classes in your DT initialization:

    // Disable the classes sorting_1, sorting_2 and sorting_3
    orderClasses: false,