I’m using DataTables plugin in my project and i’m trying to set a dropdown filter for some column.

The issue is that after trying to archieve it i have dropdown for each column (while i wouldn’t set it for the first and last column) and it’s width is not coherent to the column width.

So i was trying something like this:

    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>')
            });
        });
    }

and i’ve tried to set the select width like .css("width", $(column).width) but that didn’t worked
while for skipping the first and last column i used "index" but that was looking worse

Here is how it looks like:

And if i skip the two columns it’s like:

Source: Ask Javascript Questions