ajax请求每页数据,根据返回数据生成页码
<link href="~/Scripts/pagination/pagination.css" rel="stylesheet" />
<script src="~/Scripts/pagination/pagination.min.js"></script>
<div id="dataContainer" style="border:1px solid;border-bottom-color:black;"></div>
<div id="demo"></div>
function load_data(type) {
$('#demo').pagination({
dataSource: '/project?type=' + type,//接口 参数
prevText: '上一页',
nextText: '下一页',
className: 'paginationjs-theme-red',
alias: {
pageNumber: 'page',
pageSize: 'size'
},
pageSize: 5,
locator: 'a.data',
totalNumberLocator: function (response) {//处理页数
return response.total;
},
ajax: {
type: 'POST',
beforeSend: function () {//请求前处理
$("#dataContainer").html('加载中...');
}
},
callback: function (data, pagination) {//请求后处理
var html = "";
for (var i in data) {
var item = data[i];
html += load_html(item);
}
$("#dataContainer").html(html);
}
})
}
function load_html(item) {
return "<div><span>" + item.id + "</span>---<span>" + item.title + "</span>---<span>" + item.synopsis + "</span></div>";
}
load_data(0);//首次加载
后台代码:
[HttpPost]
public ActionResult index(int page, int type)
{
var size = 5;
var list = project_dal.get_list(page, size, type);
var total = project_dal.get_count(type);
var model = new result_model()
{
data = list.ToArray(),
total = total,
page = page
};
return Json(model);
}
class result_model
{
public Array data { get; set; }
public int page { get; set; }
public int total { get; set; }
}
官网地址:http://pagination.js.org/
里边有文档有具体的每个参数和方法的使用