DataTables width problem

2019-08-12 04:19发布

问题:

I am using the DataTables plugin with jQuery and I've already looked around StackOverflow and found this other question with almost the same problem (except I have no tabs) and I tried what it said there but can't make it work. I have this dropdown in the table to show only 50 records (iDisplayLenth in the code underneath) and when you select 100 or over the table completely resizes itself and I have no idea why. Any help or suggestion will be appreciated. Here's my HTML for creating the table:

<table id="content-table-redesign" class="display">

then the css related to it

#content-table-redesign{border-collapse: separate;width:1241px;margin:0 auto;}
#content-table-redesign th{min-width:45px;color:#2e2e2e;}

and the js which at this point is pretty much a mix of what I originally had and suggestions I found on the other link. Everything is being done inside the $document(function(){});

var oTable = $('#content-table-redesign').dataTable({
        "oLanguage": {
            "sLengthMenu": "Display _MENU_ records per page",
            "sZeroRecords": "Nothing found - sorry",
            "sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
            "sInfoEmpty": "Showing 0 to 0 of 0 records",
            "sInfoFiltered": "(filtered from _MAX_ total records)"
        },
        "aaSorting": [[ 0, "asc" ]],
        "bAutoWidth": false,
        "iDisplayLength": 50,
        "aLengthMenu": [10, 20, 30, 50, 100, 500],
        "sPaginationType": "full_numbers",
        "sDom": '<"top"i><"#up"f>rt<"#bottom2"l><"pagin"p><"clear">',
        "aoColumns" : [
            { sWidth: '500px' },
            { sWidth: '1000px' },
            { sWidth: '1200px' },
            { sWidth: '300px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' },
            { sWidth: '100px' },
            { sWidth: '120px' }
        ] 
    });

    oTable.fnAdjustColumnSizing();

I just realized this error only shows up on IE8 and Chrome 12+

回答1:

var oTable = $('#contactsTable').dataTable( {
  "bAutoWidth": false

});

Add this code



回答2:

This is just a long shot, but I guess that your browser must resize the window (because with 100 entries in your table, your body-element expands and a scrollbar appears), and therefore oTable.fnAdjustColumnSizing() kicks in and resizes your columns. Might want to check that out?

API reference: fnAdjustColumnSizing