使用DataTable插件实现异步加载数据

2023-09-20 20:45:04 48

table部分代码




用户名
渠道名
游戏名
结果
耗时
创建时间

异步加载数据并实现定制化

下面是简单例子,其中table-main的初始化元素为table的id。

$('#select-game').select2();//初始化搜索下拉框

//表格汉化列表
vartable_lang={
"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":"末页",
"sJump":"跳转"
},
"oAria":{
"sSortAscending":":以升序排列此列",
"sSortDescending":":以降序排列此列"
}
};

//初始化表格
vartable_main=$("#table-main").dataTable({
language:table_lang,//提示信息
autoWidth:false,//禁用自动调整列宽
lengthMenu:[25,50,100],
stripeClasses:["odd","even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
processing:false,//隐藏加载提示,自行处理
serverSide:true,//启用服务器端分页
searching:true,//启用原生搜索
orderMulti:true,//启用多列排序
order:[],//取消默认排序查询,否则复选框一列会出现小箭头
renderer:"bootstrap",//渲染样式：Bootstrap和jquery-ui
pagingType:"simple_numbers",//分页样式：simple,simple_numbers,full,full_numbers
columnDefs:[{
"targets":'nosort',//列的样式名
"orderable":false//包含上样式名‘nosort'的禁止排序
}],
ajax:function(data,callback,settings){
//封装请求参数
varparam={};
param.limit=data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.start=data.start;//开始的记录序号
param.page=(data.start/data.length)+1;//当前页码
//ajax请求数据
$.ajax({
type:"GET",
url:"getRecodeList",
cache:true,//开启缓存
data:param,//传入组装的参数
dataType:"json",
success:function(result){
//console.log(result);
//setTimeout仅为测试延迟效果
setTimeout(function(){
//封装返回数据
varreturnData={};
returnData.draw=data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal=result.total;//返回数据全部记录
returnData.recordsFiltered=result.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data=result.data;//返回的数据列表
//console.log(returnData);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
cut_td($("#table-main"),40);//表格截断

},200);
}
});
},
//列表表头字段
columns:[
{"data":"user_name"},
{"data":"channel"},
{"data":"game"},
{"data":"status",
"render":function(data){
varstatus_name='';
switch(data)
{
case0:status_name='未完成';break;
case1:status_name='脚本错误';break;
case2:status_name='成功';break;
case3:status_name='测试通过';break;
default:status_name='未知';break;
}
returnstatus_name;
}},
{"data":"cast_time",
"render":function(data){
if(data)
{
returndata+'s';
}
else
{
return'废弃';
}
}},
{"data":"format_created_at"},
]
}).api();

后台数据返回格式

{
"total":234,
"per_page":"25",
"current_page":1,
"last_page":10,
"next_page_url":"http://local.dgc_sdkops.com/monitor/log_pack/getRecodeList?page=2",
"prev_page_url":null,
"from":1,
"to":25,
"data":[
{
"id":128,
"user_id":1,
"task_id":"package_128_113",
"channel_version_id":128,
"game_version_id":113,
"extend_id":0,
"type":"pack",
"status":2,
"remark":"",
"cast_time":93475,
"created_at":"1500365068",
"updated_at":"1500458543",
"user_name":"admin",
"format_created_at":"2017-07-1816:04:28",
"format_updated_at":"2017-07-1816:04:28",
"game":"x",
"channel":"y",
"game_id":11290,
"channel_id":67
},
{
"id":240,
"user_id":1,
"task_id":"package_128_113",
"channel_version_id":128,
"game_version_id":113,
"extend_id":0,
"type":"pack",
"status":0,
"remark":"",
"cast_time":0,
"created_at":"1500458454",
"updated_at":"1500458454",
"user_name":"admin",
"format_created_at":"2017-07-1918:00:54",
"format_updated_at":"2017-07-1918:00:54",
"game":"x",
"channel":"y",
"game_id":11290,
"channel_id":67
}
]
}

使用DataTable插件实现异步加载数据

热门推荐

随机推荐