这次给大家带来datatable怎样实现异步加载，datatable实现异步加载的注意事项有哪些，下面就是实战案例，一起来看一下。
table部分代码
<table class="table table-bordered table-striped" id="table-main">
<thead>
<tr>
<th>用户名</th>
<th>渠道名</th>
<th>游戏名</th>
<th>结果</th>
<th>耗时</th>
<th>创建时间</th>
</tr>
</thead>
</table>
异步加载数据并实现定制化
下面是简单例子, 其中 table-main 的初始化元素为table的id。
$('#select-game').select2(); // 初始化搜索下拉框
// 表格汉化列表
var table_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: : 以降序排列此列
}
};
//初始化表格
var table_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) {
//封装请求参数
var param = {};
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 () {
//封装返回数据
var returndata = {};
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){
var status_name = '';
switch(data)
{
case 0: status_name = '未完成'; break;
case 1: status_name = '脚本错误'; break;
case 2: status_name = '成功'; break;
case 3: status_name = '测试通过'; break;
default : status_name = '未知'; break;
}
return status_name;
}},
{ data: cast_time,
render : function(data){
if (data)
{
return data + '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-18 16:04:28,
format_updated_at: 2017-07-18 16: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-19 18:00:54,
format_updated_at: 2017-07-19 18:00:54,
game: x,
channel: y,
game_id: 11290,
channel_id: 67
}
]
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue2.0怎样操作用户权限
axios使用步骤详解（附代码）
以上就是datatable怎样实现异步加载的详细内容。