Issue in search when used with row grouping

rohanyerolkar

Hi,

I have jquery datatable with two level row grouping. If i search anything in the table, it searches the data correctly but removes all grouping or merges all searched data into one group. Also, it works fine for one level grouping.

I have tried most of things i found on the internet but none of them were useful.

does anyone know anything about this?

allan

How are you doing your row grouping? The RowGroup extension doesn't support two levels of grouping I'm afraid.

Allan

rohanyerolkar

I have used drawcallback function for this -

drawCallback: function (settings) {

            var api = this.api();
            var rows = api.rows().nodes();
            var last = null;
            var counter = 0;
            api.column(9, {  }).data().each(function (group, i) {//page: 'current'
                if (last !== group) {
                    counter = counter + 1;
                    $(rows).eq(i).before(

                        '<tr class="groupPeriod" ><td colspan="8">' 

                        '<b><label style="padding-left:30px">' + group.toString().toUpperCase() + '</label></b></td></tr>'

);

                    last = group;
                }
            });
            api.column(8, {  }).data().each(function (group, i) {//page: 'current'
                if (last !== group) {

                    $(rows).eq(i).before(

                        '<tr class="group" style="background-color:gainsboro"><td colspan="8">' +

                        '<b><label style="padding-left:30px">' + group.toString().toUpperCase() + '</label></b>' 

);

                    last = group;
                }
            });

allan

You'd need to update your grouping every time the draw event is triggered.

Allan

rohanyerolkar

Could you please give any example? I am trying this but not able to solve. My drawcallback function is getting called from search event but result is the same.

allan

Hmm - actually you are using drawCallback already - I didn't see that since it wasn't in the code highlighting. That should be all that is needed.

Really I'd need a test case to understand why it isn't working.

Allan

rohanyerolkar

I have the similar problem mentioned in this post : http://jsfiddle.net/j4n87xvy/3/

Search results are not displaying grouping.

allan

The example isn't running because of Javascript errors. However, DataTables won't automatically detect any grouping from the data-tt-id attributes (etc).

I don't see anything actually doing any grouping there.

Allan

rohanyerolkar

I found the solution.

I had missed "{ page: 'current' }" in below line of code in DrawCallBack function

var rows = api.rows({ page: 'current' }).nodes();

topoluc

I am getting similar problem when searching in a two level row grouping and { page: 'current' } solution doesn´t works for me.

This is my drawcallback function code:

drawCallback: function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'all'} ).nodes();
        var last = null;
        var sublast = null;

        var grupo;

        var total = null;
        var subtotal = null;
        var a_origen = null;

        var intVal = function ( i ) {
            return typeof i === 'string' ? i.replace(/[\$,]/g, '_')*1 :
                typeof i === 'number' ? i : 0;
        };

        api.column(0, {} ).data().each( function ( ctra, i ) {
            ctra_assoc = ctra.substring(0, 6);
            if (last !== ctra) {
                $(rows).eq( i ).before(
                   '<tr class="group" height= "50px"><td colspan="5">'+ctra.toUpperCase()+'</td><td colspan="2" class="'+ctra_assoc+'"></td></tr>'
                );
                total = intVal(api.column(8).data()[i]);
                last = ctra;
            } else {
                total += intVal(api.column(8).data()[i]);

            }
            $("."+ctra_assoc).html(total.toFixed(2));
            a_origen += intVal(api.column(8).data()[i]);

            grupo = api.column(1).data()[i];
            grupo_assoc = grupo.replace(/\s/g, "_");
            if (sublast !== grupo) {
                $(rows).eq( i ).before(
                   '<tr class="subgroup" height= "50px"><td colspan="5">'+grupo+'</td><td colspan="2" class="'+ctra_assoc+'_'+grupo_assoc+'"></td></tr>'
                );
                subtotal = intVal(api.column(8).data()[i]);
                sublast = grupo;
            } else {
                subtotal += intVal(api.column(8).data()[i]);
            };
            $("."+ctra_assoc+'_'+grupo_assoc).html(subtotal.toFixed(2));
        } );

        $(".panel-title").html('Listado de operaciones ejecutadas | Total a origen: '+a_origen.toFixed(2)+' €');
    }

I suppose that there is something wrong in it. Can anybody help me, please?

allan

Hi,

I'm not sure what you mean by "two level row grouping" as that isn't a feature that DataTables provides. Could you link to a test case showing the issue please?

Allan

topoluc

Hello,

Perhaps, i´ve been too adventured to name it as "two level row grouping" but basically i tried to group rows until two columns depth, as you can check in the example i am working on:

https://jsfiddle.net/mvwf3qwm/3/

I´ve tried with a few cases, for example:
If i search for code 12512 the result is ok.
If i search for code 12411 then i lose the "first level grouping".
If i search for code 22314 then all grouping is lost.

It seems to fail when you ask for rows that are separated from the row named groups.

I´ve detected similar issue in:

https://stackoverflow.com/questions/34122807/jquery-datatables-row-grouping-sum-collapsible-export/35657438#35657438

https://codepen.io/jasonblewis/pen/PWgwPL

topoluc

Any idea?

allan

I'm sorry no - I'd need to make some time to read through and debug the code. I've not had a chance to do that yet. This is probably something that would fall under the support options to be honest.

Allan