keep grouping while sorting on various cols- bug in example??

ironandsteel · April 2017

I need to be able to group rows on a particular column (it can be visible). Easy enough, using drawcallback as in the example:
https://datatables.net/examples/advanced_init/row_grouping.html

Now, I need to be able to maintain the grouping at all times, even when I click on other column headers. In the case of the rowgrouping example cited above, I'd like to click on the Name column and still have the groups, but the rows would be ordered by name, click on the Start Date and have them in Start Date order while still in groups, etc. The Edinburgh group would always be at the top, for example.

The example is pretty close to what I need. Currently, if you click the "Age" header, the whole table sorts by age, but you lose the groups. However, if you click any of the group rows, it reverts to the grouping with the rows sorted by age, within the group. Sweet!

Now- how would I make this happen automatically without the intervening step of no grouping? And by the way, I'm always going to want descending order on the column that I sort by, rather than ascending.

Thanks for any help on this.

allan · April 2017

Use the orderFixed option to specify a column to always be ordered first.

Allan

ironandsteel · April 2017

Allan-
Thanks very much! orderFixed solved my problem. You may want to consider adding that to the online demo because I think this is the functionality most people would want when doing row grouping.

And I'm adding "orderSequence": [ "desc" ] to my columns to force descending order when first clicked- works great. Thanks!

ironandsteel · April 2017

Actually- a minor glitch. On columns on which I set orderSequence, I now do not get a cursor pointer when I mouse over those headers- I get the i-beam cursor. Kinda weird? Here is the table. See anything funny?

var addtable = $('#contaddedtable').DataTable(
{
    "order": [ 2, 'asc' ]
    ,"orderFixed": [2, 'asc']
    ,"columnDefs": [
    {
        "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],
        "createdCell": function (td, cellData, rowData, row, col)
        {
            if ( rowData.inUse == 1 )
            {
                $(td).addClass('inUse');
            }
        }
    }]
    ,"columns": [
    { "data": "inUse", "visible": false}
    ,{ "data": "Company" }
    ,{ "data": "CSI" }
    ,{ "data": "Pref" }
    ,{ "data": "Accepted", "orderSequence": [ "desc" ] }
    ,{ "data": "Newest", "orderSequence": [ "desc" ] }
    ,{ "data": "NumInvits", "orderSequence": [ "desc" ]}
    ,{ "data": "NumAwards", "orderSequence": [ "desc" ]}
    ,{ "data": "ID", "visible": false }
    ,{ "data": "MD" }
    ,{ "data": "Balt" }
    ,{ "data": "DC" }
    ,{ "data": "NVa" }
    ,{ "data": "VA" }
    ,{ "data": "DE" }
    ,{ "data": "WV" }
    ,{ "data": "PA" }
    ,{ "data": "MS" }
    ,{ "data": "Un" }
    ]
    ,paging: false
    ,"scrollY": "500px"
    ,deferRender: true
    ,"scrollCollapse": true
    /*,select: {
        style: 'os'
    }*/
    ,dom: 'Bfrtip'
    ,buttons: [
    {
        text: "Select all (filtered)",
        action: function ( e, dt, node, config ) {
            dt.rows( { search: 'applied' } ).select();
        }
    },
    'selectNone',
    {
        text: 'Pref Only',
        action: function ( e, dt, node, config ) {
            addtable
            .columns( 3 )
            .search( '1' )
            .draw();
        }
    },
    {
        text: 'All',
        action: function ( e, dt, node, config ) {
            addtable
            .columns( 3 )
            .search( '' )
            .draw();
        }
    }
    ]
    ,language: {
        buttons: {
            selectAll: "Select all",
            selectNone: "Select none"
        }
    },
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                var csiString = csiAssocArr[group];
                $(rows).eq( i ).before(
                '<tr class="group"><td colspan="17">'+ group + " " + csiString +'</td></tr>'
                );
                last = group;
            }
        } );
    }
});

allan · April 2017

Seems to work okay here: http://live.datatables.net/nabokoku/1/edit .

Can you link to a test case showing the issue or modify that example please?

Allan

ironandsteel · April 2017

Ok- I modified your code to be exactly what is in your row grouping example. Then I added "orderFixed": [2, 'asc']. So far so good.

Then, I made col 3 (Age) default to desc like this:

        "columnDefs": [
            { "visible": false, "targets": 2 },
            { "orderSequence": [ "desc" ], "targets": 3}
        ],

... and now, if you mouseover the Age header, you will see the cursor change to I beam.

allan · April 2017

Got it! Oddly, my example does actually show the issue on Chrome / Mac, but I was using Chrome / Linux yesterday and worked as expected there...

Anyway, I see the problem and have committed a fix. The nightlies will update with the change soon.

Regards,
Allan

ironandsteel · April 2017

Allan-
When will this fix be in the cdn? I'm pulling in:
https://cdn.datatables.net/v/dt/jqc-1.12.3/moment-2.13.0/dt-1.10.12/b-1.2.2/fh-3.1.2/sc-1.4.2/se-1.2.0/datatables.min.css

Thanks

allan · April 2017

Not sure when DataTables 1.10.13 is going to be released yet. There are a few other things I need to tidy up as well, so it likely won't be too far away. Perhaps the end of the month, but I don't have a committed shipped schedule for it yet.

Allan

keep grouping while sorting on various cols- bug in example??

keep grouping while sorting on various cols- bug in example??

Replies

Howdy, Stranger!

Categories

DataTables

keep grouping while sorting on various cols- bug in example??

keep grouping while sorting on various cols- bug in example??

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables