How to add image with condition in jquery datatable rowgroup in Group header

farwa

I am using jquery datatable plugin with asp.net webforms and gridview ,I want to put an image in group header with condition base on cssClass of my code is

$(document).ready(function () {
var table = $('#grdInspection').DataTable({
    "columnDefs": [
        { "visible": false, "targets": 2 }
    ],

    "order": [[2, 'asc']],
    "displayLength": 3,
    "paging": false,
    "ordering": false,
    "info": false,
    "searching": false,
    "drawCallback": function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        api.column(2, { page: 'current' }).data().each(function (group, i) {
            var element = $("#grdInspection").find('td').hasClass('blink');
            var ratingTdClass;
            var element_blue;
           // alert(element);
            if (last !== group && element == true ) {
                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="5">' + group + '<img src="redCircle.gif" / ></td></tr>'
                                   );
                last = group;
            }
            else if (last !== group && element == false) {
                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="5">' + group + '<img src="greenCircle.gif"style="margin-left:5%;" / ></td></tr>'
                );

                last = group;
            }
            else if (last !== group) {
                $(rows).eq(i).before(
                    '<tr class="group"><td colspan="5">' + group + '</td></tr>'
                );

                last = group;
            }
        });
    }
});

// Order by the grouping
$('#grdInspection tbody').on('click', 'tr.group', function () {
    var currentOrder = table.order()[0];
    if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
        table.order([2, 'desc']).draw();
    }
    else {
        table.order([2, 'asc']).draw();
    }
});
})

Condition not working,I want the function which read the all classes and if have cssClass "blink" then redCircle image show in Group header,if haven't cssClass "blink" then greenCircle and if have cssClass "backgroundBlue" then no image show in group header

colin

Hi @farwa ,

This looks like a duplicate of this thread - please don't post threads twice.

It looks like you're recreating RowGroup, so it would be worth looking at that extension.

There's too much going on in your code to be able to efficiently debug it without seeing it running. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin