datatables使用

datatables是一种非常强大的表格前端软件

包括排序 分页  序号， 复杂的表头，也可ajax操作， 数据源也可以有很多种， 服务端数据源，json串数据源均可支持

以及 columnsDefs[]    里面可以直接 targets  目标 ， render  渲染， 渲染可以渲染 时间 格式之类

render function （）{}  可以直接return  你需要的东西 

datatables 不支持 单元格合并的功能 ， 如果说非要做单元格合并，那么只能  table里面存table 这样的方式来做

render里面的判断也很简单，  也可以定义全局变量 来进行判断

datatables的序号功能也很不错。

alterEInfo.on('draw.dt',function(){alterEInfo.column(0).nodes().each(function(cell,i){cell.innerHTML = i + 1;})})

datatables是根据 前面的对象的属性来自动给前台赋值，  定义 js对象

var 对象= [                                     "vendInc",                                     "ratGro"                                     ];var instables = $("#noticeColumns").DataTable({"processing" : true,"serverSide" : true,"ordering":false,"iDisplayLength":2,"language": {                "processing": "玩命加载中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","url": "","paginate": {"first":    "首页","previous": "上一页","next":     "下一页","last":     "末页"}},"pagingType":   "full_numbers","ajax" : {"url":detailSpotCheckInfoUrl,"type":"POST"},"columns" : tablecolumns(detailSpotCheckInfoColumns),"columnDefs" :[{              "targets" : 4,              "render" : function(data,type,row){           var date = new Date(row.insDate);var javascriptDate = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";return javascriptDate;              }}]})instables.on('draw.dt',function(){instables.column(0).nodes().each(function(cell,i){cell.innerHTML = i + 1;})})

上面是例子

下面定义的是tablecolumns对象

function tablecolumns(columns){var list = new Array();$.each(columns, function(x, value){var obj = new Object();obj.data = value;list.push(obj);});return list;}

//下面是$.each()的用法

$.each(Array, function(i, value) {     this;      //this指向当前元素     i;         //i表示Array当前下标     value;     //value表示Array当前元素});

如果说 是根据ajax操作来变换datatables 的表格， 那么就给datatables  加一个 destory :true  让以前的对象可以销毁，销毁之后再自动创建 就可以实现 在一个页面进行变换值了

"iDisplayLength":7,    //datatables 设置每页显示的条目数"pagingType":   "full_numbers",  //设置显示首页和尾页"serverSide" : true, //开启服务器模式"language": {               "processing": "玩命加载中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","url": "","paginate": {"first":    "首页","previous": "上一页","next":     "下一页","last":     "末页"}},     //datatables国际化，设置英文变成中文