How to coloring that grouped column? (jQuery DataTables Row Grouping)

Question

I use API methods to perform row grouping

My Code is like this : http://jsfiddle.net/oscar11/5jccbzdy/9/

// DataTable
    var table = $('#example').DataTable({
        "order": [[0, 'asc']],
        "drawCallback": function (settings){
            var api = this.api();

            // Zero-based index of the column containing names
            var col_name = 0;

            // If ordered by column containing names
            if (api.order()[0][0] === col_name) {
                var rows = api.rows({ page: 'current' }).nodes();
                var group_last = null;

                api.column(col_name, { page: 'current' }).data().each(function (name, index){
                    var group = name;

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

                        group_last = group;
                    }
                });
            }
        },
          "createdRow": function ( row, data, index ) {
               console.log(data[4]);
              console.log(row)
              $('tr.group', row).css('background-color', data[4]);
            }
    });

I want make it like this :

I try like the code above, but it's not working.

Thank you.

Gyrocode.com Gyrocode.com · Accepted Answer · 2015-10-15T12:38:30

SOLUTION

Try this code instead:

// DataTable
var table = $('#example').DataTable({
    "order": [[0, 'asc']],
    "drawCallback": function (settings){
        var api = this.api();

        // Zero-based index of the column containing names
        var col_name = 0;

        // If ordered by column containing names
        if (api.order()[0][0] === col_name) {
            var rows = api.rows({ page: 'current' }).nodes();
            var group_last = null;

            api.column(col_name, { page: 'current' }).data().each(function (name, index){
                var group = name;
                var data = api.row(rows[index]).data();

                if (group_last !== group) {
                    $(rows[index]).before(
                        '<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'
                    );

                    group_last = group;
                }
            });
        }
    }
});

DEMO

See this jsFiddle for code and demonstration.

How to coloring that grouped column? (jQuery DataTables Row Grouping)

1 Answers