datatables使用

最新推荐文章于 2024-08-10 08:07:15 发布

Summer_i

最新推荐文章于 2024-08-10 08:07:15 发布

阅读量2.1k

点赞数 3

分类专栏： datatbles

本文链接：https://blog.csdn.net/Summer_i/article/details/51035522

版权

datatbles 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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