使用datatables實作列寬設定、水準滾動條、顯示某列部分内容

示例

1、//使用 columnDefs 給列設定寬度

$('#example').DataTable( { "columnDefs": [ //給第一列指定寬度為表格整個寬度的20% { "width": "20%", "targets": 0 } ] } );

//使用 columns 給列設定寬度

$('#example').DataTable( { "columns": [ //給第一列指定寬度為表格整個寬度的20% { "width": "20%" }, null, null, null, null ] } );

2、禁止自動計算列寬:

<col>

1

2

3

​<code>​$(​</code>​​<code>​'#example'​</code>​​<code>​).dataTable( {​</code>​

​<code>​"autoWidth"​</code>​​<code>​: ​</code>​​<code>​false​</code>​

​<code>​} );​</code>​

3、如何限制列寬，實作功能：dataTable某列内容過長的話，隻顯示部分内容，滑鼠點選顯示全部，再點選顯示部分。可以切換。

4、

注釋：如果table的裡的某個列裡含有多個button，想讓button都在一行的話，可以css設定為強制不換行，則必然在一行：td,button{ white-space: nowrap;}