使用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