width - does not work in conjunction with separate column filtering

ostmal

Hello!
I ran into a problem. Note: in the proposed example, I removed all the unnecessary and left the main thing.
So, " test-1»:
I output a table with three columns. Each column is accompanied by the "width" parameter to control the width columns:

[
            {
                data: "ul",
                width: "8%"
            },
            {
                data: "dom",
                width: "2%"
            },
            {
                data: "note",
                width: "90%"
            }
        ],

Works normally: test-1

Then, I only make one change – I add the following code to JS in order to filter by individual columns (as it is done here:
https://datatables.net/examples/api/multi_filter_select.html ):

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

Result:
1. Filtering by individual columns works!
2. The "width" parameter has Stopped working, the column width is stretched!!!!

You can view it here: test-2

I don't know why.
I wish I could manage the column width!

kthorngren

I'm not able to pull up your examples due to my companies security policies. The column with is likely caused by the width of the select inputs. Maybe create a CSS to control the widths of the inputs.

Kevin

ostmal

Yes, of course, I did it with CSS. Thank you very much.

ostmal

Unfortunately, in this case, too, it does not work (

kthorngren

Here is an example:
http://live.datatables.net/gicegujo/1/edit

All three tables have the same width assignments. The first table is adding the selects without additional CSS styling. The second uses the CSS to set the select width to 80% and the last is without the selects.

HTH,
Kevin

PKCDavid

Unfortunately I was unable to get the above idea working-don't know why.

However owing to something else I read, I have it working by setting the th width, to 70%.

I am not quite there yet. With the th width set, I am able to set the column widths using the columnDefs object, on a test page but not on the page I need it to work on. I will resume investigations tomorrow.

Thanks