Responsive with grouping shows open icon on group header

fbiss

I am using grouping on my table with the responsive extension. The problem is that the responsive extension adds a green open indicator to the group header. Is there anyway to stop this this from happening?

I have an example of my table below
http://live.datatables.net/suyitoce/1

I really appreciate any help, and thanks for developing such a great script!

fbiss

The above view stopped working, so i cloned it

http://live.datatables.net/gicixiki/1/

zuzik

@fbiss,

did you find a solution of this problem?

Thank you

mk_justice

This is definitely a bug; however, I was able to fix it the following way:

       drawCallback: function (settings) {
                var api = this.api(), rows = api.rows({page: 'current'}).nodes(), last = null;
                api.column(2, {page: 'current'}).data().each(function (group, i) {
                    var $aRow = $(rows).eq(i);
                    if (last !== group) {
                        $aRow.before('<tr><td class="hidden-element"></td><td colspan="' + $aRow.children().length + '">' + group + '</td></tr>');
                        last = group;
                    }
                });
            }

What I did was that, because in my implementation, the control element was supposed to be on the first column, I gave it hidden-element class with the following definition:

.hidden-element {
       display: none;
}

Check it out live at: http://live.datatables.net/sovabofa/1/edit

There is however, another solution which I do not recommend, which is to manipulate the dataTables.responsive.css:

instead of ===>> table.dataTable.dtr-column > tbody > tr > td.control:before
it should be ===>> table.dataTable.dtr-column > tbody > tr:not(.group) > td.control:before

Needless to say, this should be done for all similar selectors in that file. I guess this second fix is the way to go for the plugin's development team.