Group a single column with letter and name in data

Question

How can we have letter and name grouping for a single column using rowGrouping plug-in and jQuery DataTables?

Eg: For values:

aaa=>1,aaa=>2,aaa=>3,aab=>1,aab=>2,aab=>3,aac=>1,aac=>2,...

should group (sGroupBy) with letter A, B, then with name aaa, aab, aac.

Answer 1

SOLUTION

Plug-in rowGrouping is no longer being developed, I would not recommend using it. Use alternative way to perform row grouping as shown in Row grouping example.

For example, use the code below to group rows by first letter when sorted by column containing names.

var table = $('#example').DataTable({
    "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.substr(0, 1);

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

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

DEMO

See this jsFiddle for code and demonstration.