dataTable进行服务端分页返回的前端处理
2019-05-20 本文已影响0人
Piemon_Jay
最近搞的后台,框架用的h-ui,里边用到了datable。
这里介绍一下:datatable是一款基于jQuery的表格插件,简单易用。
话不多说,开始敲bug:
table=$('.table-sort').dataTable({
serverSide: true,
orderable:false,
searching: false,
lengthChange: false,
pageLength: 15,
sort : false,
ajax:{
url: "接口地址",
type: "POST",
contentType: "application/x-www-form-urlencoded",
async : false,
dataType : 'json',
data:function(d){
//通过形参"d"可以获取到datable自带的参数信息,然后计算和转换设置接口所需要的参数
//我的服务端接口配置是pageno为页数,count为数量,state是其他参数
d.pageno = d.start/d.length+1;
d.count = d.length;
d.state=$("#orderstate").val();
},
dataFilter: function (json) {//json是服务器端返回的数据
//如果服务端返回的json字符串符合datatable要求,则直接return json,若不符合则进行以下步骤
//获取到的是json字符串,转换成json对象,提取所需要的数据
var dt = $.parseJSON(json);
console.log(dt);
pagetotal = dt.data.pagetotal;
list = dt.data.list;
//然后定义一个符合datatable要求的对象,data属性的值是实际返回的数据
var returndt = {
//"draw": ,
"recordsTotal": dt.data.recordTotal,
"recordsFiltered": dt.data.recordTotal,
"data":dt.data.list
};
//把符合要求的对象再次转为json字符串return出去
return JSON.stringify(returndt);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
window.parent.location.href="login.html";
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
},
"columns":[
{title:"XX",data:"oid",class:"args text-c",},
{title:"AA",data:"proname",width:"160",class:"lookde text-c",render: function(data, type, row) {
return '<u style="cursor:pointer" onClick="order_edit(this)" class="text-primary" title="查看">'+data+'</u>'; }},
{title:"CC",data:"sku",class:"sku text-c"}
],
"aaSorting": [[ 0, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
{"orderable":false,"aTargets":[1,2,3]}// 制定列不参与排序
],
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示 _START_ 到 _END_,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "从当前数据中检索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});