使用datatables實現列寬設置、水平滾動條、顯示某列部分內容

示例

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

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

//使用 columns 給列設置寬度

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

2、禁止自動計算列寬:

1 2 3

$( '#example' ).dataTable( {    "autoWidth" :  false } );

 

3、如何限制列寬，實現功能：dataTable某列內容過長的話，只顯示部分內容，鼠標點擊顯示全部，再點擊顯示部分。可以切換。

：https://blog.csdn.net/zz_chst/article/details/79587936

4、

aoColumnDefs : [  
    {  
        "aTargets" :　[1],  //指定列
        "mRender" : function(data, type, full){  
            return 100;  //返回的是列數據的內容
        }  
    },  
     {  
        "aTargets" :　["_all"],   //選擇所有列
        "mRender" : function(data, type, full){  
            return 200;  
        }  
    }  
]  

 

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

 

 

參考：

1、https://www.jianshu.com/p/6345cb719dfc

2、http://blog.codepiano.com/pages/jquery-datatables-config-cn.html

3、http://datatables.club/example/basic_init/scroll_x.html

4、http://datatables.club/reference/option/autoWidth.html

5、http://datatables.club/manual/daily/2016/05/04/option-columns-width.html

6、http://lyj86.iteye.com/blog/1830101

7、https://blog.csdn.net/tongnian_2010/article/details/72991099