width - does not work in conjunction with separate column filtering

width - does not work in conjunction with separate column filtering

ostmalostmal Posts: 102Questions: 33Answers: 0
edited April 2020 in Free community support

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!

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • ostmalostmal Posts: 102Questions: 33Answers: 0

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

  • ostmalostmal Posts: 102Questions: 33Answers: 0

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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • PKCDavidPKCDavid Posts: 2Questions: 1Answers: 0

    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

This discussion has been closed.