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