jquery.dataTables 表格分页
表格编号用户时间javascript
表格
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="60">编号</th>
<th width="60">用户</th>
<th width="60">时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
javascript
$(function(){
$('.table-sort').dataTable({
serverSide: true,
paging: true, // 开启分页
pageLength: "10", // 每页显示条数
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.page = (data.start / data.length)+1;//当前页码
param.order = data.order[0]
param.search = data.search.value; // 如果开启搜索框为搜索框值
//ajax请求数据
$.ajax({
type: "GET",
url: "<{:U('')}>",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
//封装返回数据
var returnData = {};
returnData.draw = data.limit;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.total;//返回数据全部记录
returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表
//console.log(returnData);
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}
});
},
"columns": [ // 行数必须和表格一致
{'data': 'id'},
{'data': 'realname'},
{'data': 'create_time', 'render': function(data, type, row, meta){
// 重新渲染数据
return new Date(parseInt(data) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
}},
]
}).api();
});
相关文章
- okhttp、okhttp3使用post方式发送form-data数据
- JAVA字符串逗号分隔并对每个字符串添加引号
- [Docker系列] Install BaoTa with Docker
- [信创系列]银河麒麟安装nodejs18和npm2,并启动对应工程
- EasyExcel导出Excel并合并单元格
- Python3安装pip及pip安装whl包
- [Ubuntu系列]Ubuntu 安装 Harbor
- [Ubuntu系列]Ubuntu 安装 docker 及修改 docker 存储位置
- [Centos系列]CentOS 修改 DNS
- [Centos系列]source /etc/profile 无法永久生效问题
发表评论
评论列表
- 这篇文章还没有收到评论,赶紧来抢沙发吧~