对于datatable 是一个很好的分页插件,我的感受是简单好用,datatable的"columns" 中的数组的长度与要分页的table的列数是一样的,例如: colsname = [{"data": "id"}, {"data": "logo"}, {"data": "title"}, {"data": "getDate"}, {"data": null}, {"data": "sold"}, {"data": null}] ,这个data的值与要显示的数据的属性名是一样的,如果某个列没有直接对应的值如何表示?这个问题其实很简单,直接用{ “ data ” : null }来表示对应的那一列,对于有些列数据的展示逻辑要改如何办,我们可用给datatable设置 "columnDefs"这个属性,如何定义一个非数值直接显示的列:例如
{
"targets": [4],
"data": "itemId3",
"render": function (data, type, full) {
return full.OrgPrice + '<br\>' + full.NetPrice;
}
}
[4]表示第五列,“ render ”是列的值是什么,full表示数据集合的每一个,要取集合每一个元素 的哪个属性,就直接full.那个属性名,这样就取到了,有时候我们想要传' columns '和‘columnDefs ’的这样datatable的创建就可以共用了,这样‘columns’可以向我上面写的那样定义,在使用时直接‘columns’:colsname这样就可以了,同样‘columnDefs’也可以类似的定义:需要这样申明‘columnDefs’对应的值就可以了:例如:
coldefs = [{
"targets": [1],
"data": "itemId2",
"render": function (data, type, full) {
return '<img src="https:' + full.logo + '" style="width: 50px;height: 50px;" />';
}
}, {
"targets": [2],
"data": "itemId3",
"render": function (data, type, full) {
return full.title + '<br\>' + full.titleold;
}
}, {
"targets": [4],
"data": "itemId6",
"render": function (data, type, full) {
return '<a title="查看" href="javascript:;" class="ml-5" style="text-decoration:none">排名趋势</a>';
}
}
];
这样实现了'columnDef'对应的定义,可以把这个变量,当作函数的参数传入进入,这样就把columnDef给解耦了,这样我们就可以把datatable的创建封装成一个函数,实现共享了,由于我的项目中使用的是前端分页,所以我采用的是javascript的方式,所以我就列举一个javascript封装的例子:如下:
function datatableproductshow(data, idname, colnames, coldefs) {
t = $(idname).DataTable({
"pagingType": "full_numbers",
"bSort": false,
"bLengthChange": false,
"bFilter": true,
"searching": false,
"bDestroy": true,
"data": data,
"columns": colnames,
"columnDefs": coldefs
});
t.on('order.dt search.dt',
function () {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
}
其中: t.on('order.dt search.dt',
function () {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
表示重新画第一列为序号(0表示第一列),这样如何给某一列添加为序号。就简单说到这,如果文中有什么错误,欢迎大家指正,也欢迎相互交流。
{
"targets": [4],
"data": "itemId3",
"render": function (data, type, full) {
return full.OrgPrice + '<br\>' + full.NetPrice;
}
}
[4]表示第五列,“ render ”是列的值是什么,full表示数据集合的每一个,要取集合每一个元素 的哪个属性,就直接full.那个属性名,这样就取到了,有时候我们想要传' columns '和‘columnDefs ’的这样datatable的创建就可以共用了,这样‘columns’可以向我上面写的那样定义,在使用时直接‘columns’:colsname这样就可以了,同样‘columnDefs’也可以类似的定义:需要这样申明‘columnDefs’对应的值就可以了:例如:
coldefs = [{
"targets": [1],
"data": "itemId2",
"render": function (data, type, full) {
return '<img src="https:' + full.logo + '" style="width: 50px;height: 50px;" />';
}
}, {
"targets": [2],
"data": "itemId3",
"render": function (data, type, full) {
return full.title + '<br\>' + full.titleold;
}
}, {
"targets": [4],
"data": "itemId6",
"render": function (data, type, full) {
return '<a title="查看" href="javascript:;" class="ml-5" style="text-decoration:none">排名趋势</a>';
}
}
];
这样实现了'columnDef'对应的定义,可以把这个变量,当作函数的参数传入进入,这样就把columnDef给解耦了,这样我们就可以把datatable的创建封装成一个函数,实现共享了,由于我的项目中使用的是前端分页,所以我采用的是javascript的方式,所以我就列举一个javascript封装的例子:如下:
function datatableproductshow(data, idname, colnames, coldefs) {
t = $(idname).DataTable({
"pagingType": "full_numbers",
"bSort": false,
"bLengthChange": false,
"bFilter": true,
"searching": false,
"bDestroy": true,
"data": data,
"columns": colnames,
"columnDefs": coldefs
});
t.on('order.dt search.dt',
function () {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
}
其中: t.on('order.dt search.dt',
function () {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
表示重新画第一列为序号(0表示第一列),这样如何给某一列添加为序号。就简单说到这,如果文中有什么错误,欢迎大家指正,也欢迎相互交流。