How to customize width of select dropdown list in datatables

khubab

bootstrap 4.0 Datatables, the default width of the dropdown editor does use the width of the column according to datasize in it, which makes it hard to select the correct value. What's the best way to customize the width of search dropdown list?

allan

Using CSS - select.className { width: 400px } for example.

Allan

khubab

I need to customize each column dropdown width individualy. How can i ??

khubab

I am using dropdown filters of Datatables. and need to set width of each dropdown.
my dropdown function is

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 ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            }
              );

        }

         );

    }

allan

You could introduce a new line in the above code between 1 and 2:

.css( 'width', ... );

Allan

khubab

Thank you allan. Its worked. But i have another issue in datatable designing. i want to reduce space consuming on my page. In datatables the searchbar and extention button of excel are in two seprate rows. i want both in single row. How can i do this?

allan

You'll probably need to "float" one of them. The exact solution will depend upon the CSS styling used on the page though. I'd need a link to a page showing the issue to be able to help.

Allan

khubab

Here is the picture of my view. You can see the search box and export excel button in two different rows. i need them in single row

allan

Yup - you'd need to float one of them. However, as I said before:

I'd need a link to a page showing the issue to be able to help.

Allan

khubab

Allan i need an other help. In this datatable, in case of drop down selection filters, It exports only the filtered data.But when i applied excel like multiple selection filters. Filters worked good. But when i export filtered data, It exports the whole table data.

link on excel like filters is as follows
https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

allan

The buttons should export only the filtered data, as is the case in this example.

If your page isn't doing that, please link to a test case showing the issue so I can help debug it.

Allan

khubab

Allan how can i use multiple selection in dropdown list in data tables. Any example ??

allan

I don't have an example of that, but can create one under the support options if you need one.

Allan

Joyrex

@khubab - you might look into the excellent Buttons Documentation, about how to create custom buttons that suit your needs.

Your screenshot doesn't seem to show you actually using the Bootstrap 4 styling on your datatable, but if you were using the Bootstrap framework, those multiple buttons at the top of your datatable (assuming you are using the Buttons plugin) should group together in a Bootstrap Button Group.

Here's a screenshot of how I implement Bootstrap 4 styles and Buttons: