jQuery DataTables 插件实现分页功能
jQuery.datatables是一款基于jQuery表格插件。
首先准备一个json数据文件 - list.json
{
"total": 30,
"page": 3,
"limit": 10,
"data": [{"Id": 1,"Name": "Name1","Sex": "女"}
, {"Id": 2,"Name": "Name2","Sex": "女"}
, {"Id": 3,"Name": "Name3","Sex": "女"}
, {"Id": 4,"Name": "Name4","Sex": "女"}
, { "Id": 5, "Name": "Name4", "Sex": "女" }
, { "Id": 6, "Name": "Name4", "Sex": "女" }
, { "Id": 7, "Name": "Name4", "Sex": "女" }
, { "Id": 8, "Name": "Name4", "Sex": "女" }
, { "Id": 9, "Name": "Name4", "Sex": "女" }
, { "Id": 10, "Name": "Name4", "Sex": "女" }
]
}
测试页面
jquery DataTables插件自定义分页ajax实现
JQuery DataTables插件自定义分页Ajax实现
编号
姓名
性别
改造测试页面,增加单按钮
///改动处1:
//渲染
columnDefs: [ {
"render": function ( data, type, row ) {
return "";
},
"targets": 0 //指定渲染列:第一列(渲染第一列为单选框,data自动匹配为 {"data":"id"}中数据)
},{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort’的禁止排序
}],
////改动处2:
//列表表头字段
columns: [
{ "data": "Id" },
{ "data": "Id" },
{ "data": "Name" },
{ "data": "Sex" }
]
点击标题实现后端排序
param.page = (data.start / data.length)+1;//当前页码
//增加分页实现
if(data.order.length > 0){
param.order = data.order[0].column; //按指定列排序
param.dir = data.order[0].dir; //排序方式 asc、desc
}