Row grouping dynamically on/off

Schmakus

Hi,
I want to use row grouping dynamically on/off by switch a checkbox. With the same checkbox I set an filter.
Here's my code:

var table_show_showing_page =   $('#table_show_showing_page').DataTable( {
        "lengthMenu": [ [15, 25, 50, -1], [15, 25, 50, "All"] ],
        "ajax": {
            "url": "ajax/table.show.showing.page.php",
        },
        "deferRender": true,
        "order": [ [ 6, 'desc' ],[ 7, 'asc' ]],
        "language": { "url": "js/german.js"},
        "columns": [
            { "data": "ident", "orderable": false },
            { "data": "serial", "orderable": false, "visible": false, "searchable": false },
            { "data": "customer", "orderable": false },
            { "data": "project", "orderable": false },
            { "data": "cat", "orderable": false },
            { "data": "subcat", "orderable": false },
            { "data": "prio", "orderable": false, className: "prio_landing" },
            { "data": "date_start", "orderable": false},
            { "data": "date_end", "orderable": false, "visible": false},
            { "data": "duration", "orderable": false, "visible": false},
            { "data": "latest", "orderable": false, "visible": false},
        ],
        "searchCols": [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            { "search": "1" }
        ],
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                            $(rows).eq( i ).before(
                                    '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                            );

                            last = group;
                    }
            } );
    },
    "initComplete": function() { 
        $( ".dataTables_filter" ).append( '<button class="btn btn-primary paddingLeft" type="button" data-toggle="collapse" data-target="#table-show-options" aria-expanded="false" aria-controls="table-show-options">Optionen</button>' );
        this.api().columns().every( function () {
                                        var column = this;
                                        var select = $('<select><option value=""></option></select>')
                                                .appendTo( $(column.footer()).empty() )
                                                .on( 'change', function () {
                                                        var val = $.fn.dataTable.util.escapeRegex(
                                                                $(this).val()
                                                        );
         
                                                        column
                                                                .search( val ? val : '', true, false )
                                                                .draw();
                                                } );
         
                                        column.data().unique().sort().each( function ( d, j ) {
                                                select.append( '<option value="'+d+'">'+d+'</option>' )
                                        } );
                                } );
    }
    });
    
//******* Table filter
$('input[name="latest_on"]').on('switchChange.bootstrapSwitch', function(event, state) {
    var value = (state ? '1' : '');
    
    table_show_showing_page
        .columns( 10 )
        .search( value )
        .draw();
});

Can anybody give me an example? Thank you!

allan

You would just modify the drawCallback function that you have to either run that grouping code or not.

I would be happy to provide an example under the DataTables support options.

Allan

Schmakus

Hi Allan,

thank you for your reference! I've tried a code and it works.
But I'm not the perfect programmer and a query newbie! ;-)

Here's my first try (Perhaps a professional optimize the code?):

http://live.datatables.net/kajevaxi/1/edit?js,output

CU
Schmakus

tangerine

Perhaps a professional optimize the code?

Perhaps you should look at the paid support options.

http://datatables.net/support/

allan

Your first try looks fine to me if you want a checkbox to control the grouping :-).

Allan