jquery DataTables Row grouping trigger by select

Sh7ne

Trying to show default ordering after initial whithout the grey grouping tr , then shows the group tr after one html select selected.

But the grouping is drawn by

                "order": [[1, 'asc']],
                "drawCallback": function (settings){
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(1, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="1">' + '<b>' + group + '</b>' + '</td><td colspan="5"></td></tr>'
                        );

                        last = group;
                    }
                });
            },

I tried rowGroup extension which didn't worked out.

I just wondering how can I triger the drawCallback or call some api to add the grouping <tr> after my select on 'change'.

allan

You can trigger drawCallback by calling the draw() method.

RowGroup should be able to support what you are looking to do - what was the problem you ran into?

Allan

Sh7ne

Thanks Allan, I 'm not sure why the RowGroup doesn't work. I 'm using the uikit(tech view) css, I guess it might be the reason.

allan

Possibly. I'd be happy to take a look into it if you could link to the page showing the issue.

Allan

Sh7ne

Cool, I will try make a mock page.

BTW, may I know how can I put the whole function (settings) into this draw() api?

Sh7ne

I think the problem is the data source.

It works fine if the data comes from dom but it go mess when I change the data source to an object array. Please see the example below:

https://jsbin.com/jesehoy

Sh7ne

edited