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

示例

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

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

//使用 columns 給列設置寬度

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

二、禁止自動計算列寬:

1 2 3

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

 

三、如何限制列寬，實現功能：dataTable某列內容過長的話，只顯示部份內容，鼠標點擊顯示所有，再點擊顯示部分。能夠切換。

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

四、

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;}

 

 

參考：

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

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

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

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

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

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

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