摘要: 最近做后台管理平台用得比较多,目前贴上来的都是用过的,后续有用到更好的再添加。
官网:Datatables官网 中文网:Datatables中文网
我用过的一些配置:
var table=$('#tableId').dataTable({
"destroy": true,//是否需要重复渲染表格,若是则true.
"data": data,//数据来源,data来自上文ajax请求回掉函数中的data或定义在本地的data
//ajax与上句的data有任何一个就可以了
"ajax":{//datatable中的ajax
async: true,//同步false异步true
url:simMonitor.domain+"sim/searchSimBindState",
dataSrc://dataSrc相当于success,在datatable里面不能用success方法,会覆盖datatable内部回调方法
function(data){
//data即服务器返回的数据
return data;//自定义数据源,默认为data
},
type:"post",
data:formData//ajax请求提交给服务器端的数据,一般是表单数据
},
"createdRow": function ( row, data, index ) {//该函数可对某指定行做操作,一般用于增加某种效果
/* 设置表格中的内容居中 */
$('td', row).attr("class","text-center");//所有行,text-center的属性需自己在相关css中自己写
$('td:nth-child(3)', row).attr("class","textLeft");//第3列
$('td:nth-child(10)', row).attr("class","textLeft");//第10列
},
"bStateSave": false,//状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。这个数据是记录在cookies中的,
//打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的,并且当值为true时aoColumnDefs不能隐藏列
"ordering":false,//排序功能
"bAutoWidth":false,//宽度自适应。一般禁止,使用不当容易造成报错。(目前我还没有使用过)
"searching":false,//右上角搜索框的显示与否
"bLengthChange": true,//左上角改变每页显示数据数量的显示与否
"sScrollX":true,//x轴滚动条,若是此项设置导致thead与tbody有间隙,可设置margin消除或在table的html中设置width="100%" cellspacing="0"
"bInfo": true,//页脚信息的显示与否
"bPaginate" : true,//翻页功能的显示与否
"sCharSet":"utf-8",//设置编码格式
"deferRender": true,//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
"oLanguage": {//设置语言
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sProcessing": true//"加载中...."的显示与否
},
"columns":[//渲染列,一列一列将数据填充进去,thead中标识有多少列此处就写多少列,并且将数据填充进去,数据来源于上文的data,函数中的row即data
{"data":function(row){
cellData=(row.operator == "" || row.operator == null) ? "--":row.operator;
return cellData;
},
"type" : "string"
}
//其他列data省略....
],
"rowCallback": function( row, data ) {//行的回调函数
$(row.cells[13]).click(function(){
console.log(data);
//每行的第13个子元素(列)被点击之后,会打印出该行的所有值(不仅仅是显示的,而是data返回给该行的所有数据)
});
}
});
© 著作权归作者所有