jquery datatables change row grouping with select

Question

I am using the grouping method described here Row Grouping

and it is working fine as is.

However I am now looking to be able to change what column the rows are grouped by, by changing a select option.

Now I found a question in the forums which has the following solution.

// Just redraw
function Redraw(ordered){
    $('#table1').dataTable().fnSettings().aoDrawCallback.push( {
        "fn": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(ordered).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
        } );
    $('#table1').DataTable().draw(false);
}

Which I pass the column id the table should be grouped by. This is half what I need as it now ADDS the grouping on top of original grouping.

Is this due to the new function being pushed to the aoDrawCallback as opposed to replacing it?

Any idea how I can just replace the original callback (and remove grouping) then draw with the new callback function?

Any help appreciated!

Martin O Leary · Accepted Answer · 2016-06-20 10:49:31Z

1

Ok found it - pretty straight forward actually.

I found an answer here that lead me to the right method. So in my initialization code the draw callback function is passed global variable (ID of column) to order on:

var table = $('#table1').DataTable( {
        data : data,
        scrollCollapse: true,
        paging:         false,
        "order": [[ groupCol, "desc" ]],
        "dom": '<"selector">frtip',
        "columnDefs": 
            [{ 
                className: "fa fa-plus-circle firstCol", 
                "targets": 0 ,
            },{ 
                className: "descriptionText", 
                "targets": [3,6,10,16] ,
            },{
                "targets": 0,
                "orderable":false,
                "defaultvalue":''
             },
             {
                "targets": [1,4,5,7,9,11,12,13,14,15,16,17,18,19,20,21],
                "visible": false,
                "searchable":true
            }],
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(groupCol).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

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

To change this I just have the global variable changed when the select input is changed and then redraw the table.

    $('#grouping').on('change',function(){
    var table = $('#table1').DataTable();
        switch(this.value.toUpperCase()){
        case "TOOL":
            groupCol=1;
            break;
        case "COMP":
            groupCol=5;
            break;
        default:
            groupCol=1;
        }
        table.draw(groupCol);
})

So I was initially looking at a method to hard code the column ID into the callback function and change the whole function whereas now I am using a variable and just redrawing which fires the callback function!

answered Jun 20, 2016 at 10:49

Martin O Leary

6912 gold badges10 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lbriquet Over a year ago

I am working on a similar issue. Could you post a jsfiddle example @Martin O Leary? I'm interested in seeing the html side of your solution (select box and column data targeted).

Martin O Leary Over a year ago

Hi sorry for not replying sooner. I will work on a fiddle over the next week and post here.

Collectives™ on Stack Overflow

jquery datatables change row grouping with select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related