Multi-select filter and Child Row

BalaKrishnanDhanuskodi

Happy Evening one and all,

I am to trying use both Multi-select filter and Child row display and was successful in terms of display, but the select is displaying [object][object] - Please refer the enclosed exhibit and help to fix.

allan

Do you really want to show a select filter for that column? I'd imagine probably not, in which case you need to modify the code to skip over that column.

Allan

BalaKrishnanDhanuskodi

No, I want to skip that row alone from 'select' filter. Can I request for a syntax to hide the select filter for that column?

allan

Without being able to see the rest of your code, its virtually impossible to say for sure, but you probably want to use a suitable jQuery selector. Something like :not(:first-child).

Allan

BalaKrishnanDhanuskodi

        select: true,
        lengthChange: false,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                        column.data().unique().sort().each( function ( d, j ) {

                        if(column.search() === '^'+d+'$'){
                            
                        select.append( '<option value="'+d+'" selected="selected">'+d+'</option>' )
                        } else {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                        }
                        } );

            } );
        },

allan

this.api().columns().every( function () {

That is selecting every column. Use:

this.api().columns(':not(:first-child)').every( function () {

Allan

BalaKrishnanDhanuskodi

Thanks for your wonderful support, how to specify in column # instead of ':not(:first-child)'

allan

All of the selectors you can use are defined in the jQuery documentation. You can also use column indexes as documented here in column-selector.

Allan

BalaKrishnanDhanuskodi

Works perfectly;

this.api().columns(':contains(Salary)').every( function () {