Datatables常用配置

• Datatables常见配置 http://www.datatables.club/reference/option/
• DataTables的组件元素的显示和显示顺序 http://www.datatables.club/reference/option/dom.html

常见的使用

1. 表格数据和表头的写法
   项目中的写法

   var datatable=$('table').DataTable({
   	'dom': 'Tt<"rocaTableButton"lgi>p',//DataTables的组件元素(每页显示条数等)的显示和显示顺序 
   	serverSide: true,//服务器端模式
   	paging: true,//可分页
       pageLength: 25,//初始时每页展示25条
       ajax:{//请求数据
       	url:'',
       	type:'',
       	data:'',
       },
       columns:[
   		{
   			name:'id',//排序的字段
   			title:"ID",//表头内容
   			orderable:true,//是否排序
   			render:function(data, type,row, meta){
   				//row行数据
   				return row.id;
   			}
   		},
   		{
   			name:'name',//排序的字段
   			title:"名称",//表头内容
   			orderable:false,//是否排序
   			render:function(data, type,row, meta){
   				//row行数据
   				return row.name;
   			}
   		}
   	],
       columnDefs:[
       	//显示隐藏的列
       	{'visible':false,'aTargets':[0,1,2,3]}
       ]
   });
   

2. 刷新表格内容

   //获取datatables的对象datatable
   datatable.settings()[0].ajax.data =function(datasend){
   	var datasend=datasend;
   	//{'key':'value'}为其他自定义的非datatables服务器端模式参数
   	$.extend(datasend,{'key':'value'});
   		return datasend;
   }
   datatables.ajax.reload();	
   

3. 表格动态自定义显示/隐藏列
   若想刷新自定义列的显示隐藏不变则需要存储显示或隐藏的列,此时我自定义的方法为getColumn()来获取数据

   //只写显示隐藏列
   var datatable=$('table').DataTable({
       columnDefs:[
       	//显示隐藏的列
       	{'visible':false,'aTargets':getColumn()}
       ]
   });
   

   参考文档：http://datatables.club/example/api/show_hide.html
4. 表格固定列
   当数据很多的情况，则需要自定义列或者固定几行列，其他数据部分可滑动
   固定列需要引用datatables的扩展功能

   var datatable=$('table').DataTable({
   	serverSide: true,//服务器端模式
   	paging: true,//可分页
       pageLength: 25,//初始时每页展示25条
       scrollX:true,
       scrollY:true,
       scrollCollapse: true,
       paging: true,
       pageLength: 25,
       fixedColumns:{
       	leftColumns:'4',//最左侧5列固定
       	rightColumns:'5'//最右侧5列固定
       },
   });
   

   参考文档：https://datatables.net/extensions/fixedcolumns/