Filtered Columns, width 100%, and scrollX

Lonnie.Hull

Hello,

I'm hoping this is a pretty simple question.

Can I use the code below to filter my data AND keep my data to 100% of screen size. As my table has 15 columns, when I turn off scrolling it causes the rows to wrap which causes the filtering to stop working.

I'm looking to filter my data and have the table shrink the columns to fit the screen. I've tried quite a few things, but I can't believe I'm the only person to want to combine these two. Maybe I use a different filter function?

the code:

<script> $(document).ready(function() {
    $('#IN_Ship').DataTable( {
    "paging":   false, 
        
        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>' )
                } );
            } );
        }
    } );
} );
</script>

Any help would be appreciated.

If I need to I'll build a full test site, I can. I'm using CSS and all scripts locally. I'll just need to get all the links set back up for the native dataTables location.

Thanks for your time and attention.

EDIT: Formatted code using Markdown.

kthorngren

I started a test case for you:
http://live.datatables.net/hokopaga/1/edit

when I turn off scrolling it causes the rows to wrap which causes the filtering to stop working.

I'm not sure how to recreate this issue. Maybe you can update the test case.

Kevin

Lonnie.Hull

kthorngren,

Thank you so much for setting that up for me.

That's a perfect example of what I'm seeing (basically) in the result screen. Even though I've said I want the table to fit to the available space, it still over rides the width="100%" and creates a scroll bar. I've added in scrollx and it appears to be working as programmed in the test environment.

One solution that I think may work is to reduce the font size and padding in the CSS. However, I can't find the proper field to control the font size in the filter boxes in the JS function. It appears to be controlled in the function. Having the larger font in the filter boxes, I believe is causing the scroll bar even with a tr font-size of 8px.

Thank you so much for your help on this. Any suggestions would be appreciated.