Changing dataSrc to array not working

hrast

Hi everyone!
I am implementing this example - https://ksia.or.kr/plugin/DataTables-1.10.15/extensions/RowGroup/examples/initialisation/event.html but with multiple grouping level.

        <div class="col-sm-12 col-md-3 mb-2">
            Group by:
            <button class="group-by btn btn-primary btn-sm" data-column="1">value1</button>
            <button class="group-by btn btn-primary btn-sm" data-column="2">value2</button>
            <button class="group-by btn btn-primary btn-sm" data-column="4">value4</button>
        </div>

$(document).ready(function() {
    var groupColumn = 1;
    var groupColumn2 = 0;
    var table = $('#example').DataTable( {

        order: [[groupColumn , 'asc'], [groupColumn2, 'asc']],
        rowGroup: {
            startRender: null,
            endRender: function(rows, group) {//ALL KINDS OF CALCULATION}
            dataSrc: [groupColumn, groupColumn2]
        }
    } );

    // Change the fixed ordering when the data source is updated
    table.on( 'rowgroup-datasrc', function ( e, dt, val ) {
        table.order.fixed( {pre: [[ val, 'asc' ], [groupColumn2, 'asc']]} ).draw();
    } );

    $('a.group-by').on( 'click', function (e) {
        e.preventDefault();

        //HERE I GET THE ERROR - c[k] is undefined
        table.rowGroup().dataSrc( [$(this).data('column'), groupColumn2] );
    } );
} );

I have newest version of RowGroup plugin. Is there another way to change dataSrc array value?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

hov

Hi @colin,

I have managed to put together a test case - https://jsbin.com/merumogavo/edit?js,output.

So I want to have Office always as my subgroup and I want to change the first group. When I click on Age or Position it throws c[k] is undefined.

hov

I'm sorry. This is the test case with html and js - https://jsbin.com/merumogavo/edit?html,js,output

hov

I'm sorry. I'm new to this! This is the real one:
https://jsbin.com/koxiyefiwu/3/edit?html,js,output

colin

You had a couple of things wrong with that:
1. rowGroup().dataSrc() only takes the column index, not the sort direction
2. you Age button had column 0, not 3

Here's that example updated.

Colin

kthorngren

I think the problem is that rowGroup().dataSrc() is not working when sending an array of column indexes which is what @hov 's example is trying to do. You will see a couple of console errors in @hov 's example.

Kevin

hov

Yes, that is what I'm trying to do, @kthorngren.
I'm trying to send an array of column indexes and it doesn't work.

Thank you, @kthorngren, for clearing that out!

hov

I'm basing my example on this documentation.

hov

@colin, I'm sorry for being boring but I would really like to know if you get what I'm trying to do and if I'm doing it right or if there is another way to do it.

Appreciate all the help so far!

colin

Sorry, I did mean to look into this, thanks for the nudge.

Something definitely wrong there - it's working for me here, but I can't see what the difference is between that and yours. We'll take a deeper look and report back,

Colin

jkibler

@colin did you ever find anything regarding this issue? I am having the same issues trying to use this in SPFX. I've npm installed latest version of datatables.net and rowgroup, but dataSrc tells me it only accepts INT or string, no array. Works fine with single column rowGroup, but I need multiple columns.

Thanks!

colin

Got it! The problem is in the original code, which wasn't in my example.

  table.on('rowgroup-datasrc', function (e, dt, val) {
    table.order.fixed({ pre: [[val, 'asc'], [2, 'asc']]} ).draw();
  });

Because of the double ordering, val is [x,y], and you can't pass [[x,y], 'asc'] - you need to split the values and add them individually to the order.fixed() call.

Colin