官网: 中文网:
我用过的一些配置:
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返回给该行的所有数据) }); } });