Datatable columnDefs not working with initComplete: function

fird0s

I'm creating table with Datatable, but when I set width with columnDefs it's not working well. this is my code

    var desa_binaan = $('.desa_binaa').DataTable( {
      "order": [[ 0, "desc" ]],
       dom: 'lBfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            
            'colvis'

        ],
        language: {
            buttons: {
                colvis: 'Tampilan Kolom'
            }
        },
       // init 
        initComplete: function () {
            this.api().columns([1,2,3,4,5,7,8]).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>' )
                } );
            } );
        },
        // .init  
        "columnDefs": [
          { "width": "10%", "targets": 0 }
        ]
    } );

but when i delete script below, it columnDefs works well.

// init 
    initComplete: function () {
        this.api().columns([1,2,3,4,5,7,8]).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>' )
            } );
        } );
    },
    // .init

Thanks

kthorngren

When you say "not working well" I assume you mean the width is not what you expect, correct?

Maybe you need to control the width of the select input. Try using style="width: 30px" (or whatever size you want) on the select tag in line 5.

If this doesn't help or is not the issue please post a link to your page or a test case replicating the issue so we can see what is happening.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin