How to enable extensions in Individual column searching datatables (select inputs)

Ezhilan

I am trying to add extensions to the datatable having the API column().data(). But the API is not called if i use extensions. Please suggest a fix on this.

$(document).ready(function() {

$('#example').DataTable( { 

    "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
    scrollX:        true,
    scrollY:        true,
    deferRender:    true,
    scroller:       true

    initComplete: function () {
        this.api().columns([0,1,2]).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 ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
} );

} );

colin

Hi @Ezhilan ,

I don't understand when you say "the API is not called" if you use extensions. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here. Please also add steps on how to reproduce the problem.

Cheers,

Colin

Ezhilan

"API is not called" means the Individual column filtering(selected inputs) is not working. @colin

colin

Hi @Ezhilan ,

It's because you missed the comma on line 7 after 'Scroller'. If you check your console, you'll see an error highlighting that.

Cheers,

Colin