应用按列搜索后未设置数据表列宽

Question

我正在对数据表使用此设置

$('#tab_logic_outer tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

    $('#tab_logic_outer').DataTable({          
    "bDestroy":true,              
    "sScrollY": temp_fh,       
    "sScrollX":"98%",              
    "bPaginate": false,                    
    "bLengthChange": false,               
    "bScrollCollapse": true, 
    "bProcessing": true,
    "bDeferRender": true,
    "order": [[ 0, "desc" ]],
    "info":     false,     
    "bAutoWidth": false , 
    "aoColumns" : [
    { sWidth: '5%' },
    { sWidth: '10%' },
    { sWidth: '5%' },
    { sWidth: '10%' },
    { sWidth: '10%' },
    { sWidth: '10%' },
    { sWidth: '10%' },
    { sWidth: '10%' },
    { sWidth: '10%' }
  ]     
    });    
 var table = $('#tab_logic_outer').DataTable();
        table.columns().every( function () {
    var that = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

在应用按列搜索之前，它采用了适当的宽度，因为我已应用于表中的每一个。应用按列搜索后，我添加了 bAutowidth 和 aoColumns 选项，但它仍然无法正常工作，它对所有列的宽度相等

Answer 1

我在朋友的帮助下找到了答案，这些是所做的更改

$('#tab_logic_outer').DataTable({          
    "bDestroy":true,              
    "sScrollY": temp_fh,                   
    "bPaginate": false,                  
    "bLengthChange": false,               
    "bScrollCollapse": true, 
    "bProcessing": true,
    "bDeferRender": true,
    "order": [[ 0, "desc" ]],
    "info":     false,  
    "columns":[
    {"className": "col-30"},
    {"className": "col-150"},
    {"className": "col-30"},
    {"className": "col-30"},
    {"className": "col-30"},
    {"className": "col-30"},
    {"className": "col-30"},
    {"className": "col-30"},
    {"className": "col-30"}
    ]
    });    
  <style>
  .col-30{
   min-width: 20px;
   max-width: 20px;
   }
   .col-80{
    min-width: 80px;
    max-width: 80px;
    }
    .col-100{
        min-width: 100px;
        max-width: 100px;
    }
    .col-150{
        min-width: 150px;
        max-width: 150px;
    }
    .dataTables_scrollFoot tfoot th input{
        width: 100% !important;
    }
    .dataTables_scrollFoot table{
    margin-left: -10px !important;
    }
    </style>