Custom Row and Column Visibility change

Slind

Hi there,
I'm adding a custom row to the header in order to allow per column search. Unfortunately the cells of this row are not being removed when the column visibility is changed. I wasn't able to find any solution/workaround for this issue. Are you aware of a possible solution?

Basically this is what happens:

                buttons: [
                    {
                        extend: 'colvis'
                    }
               ]

                initComplete: function () {
                    if (searchAndFilter) {
                        const table = this.api().table();
                        const row = $('<tr class="searchFilter-action"></tr>').appendTo(table.header());
                        this.api().columns().every(function () {
                            const column = this;
                            const cell = $('<th></th>')
                                .appendTo(row);
                            const classNames = columns[column.index()].className;
                            if (classNames && classNames.includes('action-search')) {
                                $('<input type="text" placeholder="Search..." data-index="' + column.index() + '" />')
                                    .appendTo(cell)
                                    .on('keyup', function () {
                                        column
                                            .search(this.value)
                                            .draw();
                                    });
                            } else if (classNames && classNames.includes('action-filter')) {
                                const select = $('<select><option value=""></option></select>')
                                    .appendTo(cell)
                                    .on('change', function () {
                                        const val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                        );

                                        column
                                            .search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                    });

                                column.data().unique().sort().each(function (d, j) {
                                    select.append('<option value="' + d + '">' + d + '</option>')
                                });
                            } else {
                                $('<span></span>')
                                    .appendTo(cell)
                            }
                        });
                    }
                }

colin

Hi @Slind ,

It's because you're adding that final column though the backdoor. You create the table with a set number of columns, that create an additional column that DataTables knows nothing about.

The best way to do would be create the complete set of columns before the initialisation, then use the columns.render or option columns.defaultContent for the content of the rows beneath.

Hope that helps,

Cheers,

Colin

Slind

Hi @colin ,
I'm not entirely sure that we are talking about the same thing. I'm adding a custom row on initComplete which adds per column filtering options. How does this related to columns.render or columns.defaultContent?

kthorngren

I haven't dug through your code snippet above but took one of my examples of header column search and added column visibility. It seems to work:
http://live.datatables.net/dikuduka/1/edit

Maybe you can update my example or create your own so we can help debug.

Kevin

Slind

Hi Kevin,
thank you for the example. Unfortunately I couldn't put it to good use because I provide Datatables with an object containing all the data. So datatables is generating the table not us ahead of time where we could modify it.
Here is a working example:
http://live.datatables.net/toyahoso/4/edit

Slind

Any help would be much appreciated.

kthorngren

I think the problem is you are appending the second header row inside initComplete. Datatables has no knowledge of this so when you hide columns that header row is not affected. I'm thinking you will need to build the headers before initializing Datatables. I updated your example to show this:
http://live.datatables.net/cufecepu/1/edit

My example is hard coded for 6 columns but you would need to determine the length of your columns array to determine the number of columns to append. The example simply builds two header rows and appends them to the table. I did not change your initComplete function to add the search inputs to the second header. They end up in a third header. Will leave this to you. However my example does demonstrate that the headers built before Datatables init will be removed using column visibility.

Also to use this solution you will need to add orderCellsTop and set it true.

Hope this gets you started.

Kevin

Slind

Hi there,
I replied back in early August, unfortunately it hasn't been reviewed/unlocked. It would be great if that could be done.

colin

Could you send that message again - given you just replied, it would suggest you're not blocked. there isn't a review queue.

C