Custom Row and Column Visibility change

Custom Row and Column Visibility change

SlindSlind Posts: 6Questions: 3Answers: 0

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)
                            }
                        });
                    }
                }

Answers

  • colincolin Posts: 1,549Questions: 0Answers: 285

    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

  • SlindSlind Posts: 6Questions: 3Answers: 0

    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?

  • kthorngrenkthorngren Posts: 2,970Questions: 19Answers: 669

    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

Sign In or Register to comment.