how do I collapse/expand groups?

gib65

Hello,

Please have a look at my example DataTable here:

http://www.shahspace.com/JQueryDataTable/grouping.html

It demonstrates grouping.

This was done programmatically as the following script shows:

    var table = $('#JQuery_DataTable').DataTable({
            "order": [[1, 'asc']],
            "displayLength": 25,
            "drawCallback": function(settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(1, { page: 'current' }).data().each(function(group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr style="background-color: #AAFFFF;" class="group"><td colspan="2">' + group + '</td></tr>'
                        );

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

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

What I'd like to do now is make the groups collapsable. I would like for the user to be able to click on a group header row (in blue) and have the group collapse or expand, leaving only the group header row visible.

Does anyone know of a script that can do this? Thanks.

carlton

@gib65 did you ever find a way to do this? I'm trying to do something similar...