mvc前端pagination分页的使用！

网上资料一大推，还是搞了好久才实现，还是开森；

话不多说，先来个图，样式可以自己去改。

首先html中引用一下几个文件

文件下载地址：https://github.com/superRaytin/paginationjs

然后js中的代码，根据需求进行更改

$(function () {
(function (name) {
var container = $('#pagination-' + name);
var options = {
dataSource: function (done) {
//var result = [];
$.ajax({
async:false,
type: 'GET',
url: '/Home/pp', //后台获取的数据地址
success: function(response) {
done(response);
}
});
//return result;
},
locator: function () { // 这个参数与 dataSource 相关，一般情况下，dataSource 是一个数组，可以直接传给分页组件处理。但如果返回的是 Object，那么就需要指定那个数组，默认为 data，不可少
// find data and return
return 'a.b';
},
pageSize: 4, // 默认显示几个页码，每页的条目数
pageNumber: 1, // 默认在第几页，初始化时加载哪一页的数据
pageRange: 2, //可见的页码范围，即当前页码两边的页码数量。比如当前是第 6 页，设置 pageRange 为 2，则页码条显示为 '1... 4 5 6 7 8'
showNavigator: true, // 显示总页码数和当前第几页
showGoInput: true, // 显示跳转到第多少页
showGoButton: true, // 显示点击跳转的按钮
// activeClassName: 'systemPagerActive',
prevText: ' 上一页 ',
nextText: ' 下一页 ',
goButtonText: 'go',
formatGoInput: '跳转到第 <%= input %> 页',
className: '"am-pagination am-pagination-default"',样式
callback: function (response, pagination) {
window.console && console.log(22, response, pagination);
var dataHtml = '<table>';//这边是添加表格的然后给样式，就是字符串的拼接

$.each(response, function (index, item) {

var pa = /.*$(.*)$/; //这两行是给数据库时间格式化的，可忽略

var unixtime = item.pubdate.match(pa)[1].substring(0, 10);

dataHtml += '<tr><td style="width: 10px">' +
'<img src="../../Content/img/point.jpg" />' +
'</td>' + '<td class="title_td_list">' +
'<div class="t_time">' +
'<span class="color_gray">' +
'[' + getTime(unixtime) + ']'
+ '</span></div>'+
'<a href="/Home/Index3?id='+item.id+'" target="_blank">'+
'<span class="over_content">'
+ item.title + '</span></a>'+
' <div class="read_num">'+
'<span class="color_gray">(阅读 <span class="color_red">'+
[item.read_count]+'</span> 次)</span>'+
' </div>'+
'</td></tr>';
});

dataHtml += '</table>';
container.prev().html(dataHtml);
}
};

container.pagination(options);

container.addHook('beforePageOnClick', function () {
// 点击页码之前调用
window.console && console.log('beforePageOnClick...');
//return false
});
container.addHook('beforeRender', function () {
// 每次分页时会重新渲染分页条，渲染之前调用
console.log("渲染之前触发");
});
container.addHook('beforePreviousOnClick', function () {
console.log('点击上一页之前调用');
});
container.addHook('beforeNextOnClick', function () {
console.log('点击下一页之前调用');
});
container.addHook('beforeGoButtonOnClick', function () {
console.log('分页跳转按钮点击之前调用');
});

})('demo1');

控制器中就返回json，随便写的测试

public JsonResult pp()
{
var curlist = BT.SqlHelper.ExecQueryList("test", null);
return Json(curlist, JsonRequestBehavior.AllowGet);

}

恩，就是这样，比较适合数据量小的，大的可以用存储过程来实现分页。

最后最后前台的调用差点忘了。。。。打上

小白一个，大家可以去官方文档了解更多的。。

mvc前端pagination分页的使用！

猜你喜欢