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国际化，设置英文变成中文