Selectpicker

robertodela

Hello

I use datatable for a huge table, and i like to customize the select using this librairies https://silviomoreto.github.io/bootstrap-select/

This code work :

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function (colIdx) {
              if (colIdx == 4 || colIdx == 5 || colIdx == 6 || colIdx == 7 || colIdx == 8 || colIdx == 9 || colIdx == 10) return;
                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(this.value)
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

} );

This code don't work

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function (colIdx) {
              if (colIdx == 4 || colIdx == 5 || colIdx == 6 || colIdx == 7 || colIdx == 8 || colIdx == 9 || colIdx == 10) return;
                var column = this;
                var select = $('<select class="selectpicker" data-live-search="true"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search(this.value)
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

} );

I don't understand why

Thank you for your help and sorry for my bad english