如何着色分组列？ （jQuery DataTables行分组）

Question

如何为分组列着色？ （jQuery DataTables行分组）

我使用API​​方法执行行分组

我的代码是这样的：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]);
            }
    });

我想要像这样：  

我尝试上面的代码，但它不起作用。

谢谢。

Answer 1

  

<强>解

请尝试使用此代码：

// 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;
                }
            });
        }
    }
});

  

<强>样本

请参阅this jsFiddle以获取代码和演示。