Question

我正在使用dataTables的这个设置

\$('#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>

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

1 个答案: