public class Pager
{
/// <summary>
/// 当前页码
/// </summary>
public int PageIndex { get; set; }
/// <summary>
/// 总页数
/// </summary>
public int TotalPages { get; set; }
/// <summary>
/// 每页展示信息数
/// </summary>
public int PageSize { get; set; }
/// <summary>
/// 前端分页调用的js方法名
/// </summary>
public string PagerFun { get; set; }
public Pager()
{
}
public Pager(string pager)
{
PagerFun = pager;
}
}
前面几个属性都好理解,那个PagerFun是什么呢?在插件的属性中,有几个函数,比如:pageUrl、onPageClicked等,后端如果想在不同分页里调用不同分页按钮点击事件,只需要把对应的js函数名在Razor引擎中放进插件声明时的参数就好了。这里给个例子吧。
C# MVC控制器:
public ActionResult Index()
{
Pager pager = new Pager("test");
pager.PageIndex = 1;
pager.PageSize = 10;
pager.TotalPages = 10;
return View(pager);
}ps:这里使用了刚刚上面那个Pager类。
CSHTML:
@{
Layout = null;
var pager = Model as WebApplication4.Models.Pager;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/css/style.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<title>Index</title>
</head>
<body>
<div id="pager">
</div>
<script src="~/Scripts/mypager.js"></script>
<script>
var test = function (even,originalEvent,type, page) {
alert(page);
};
var option = {
currentPage: @pager.PageIndex,
totalPages: @pager.TotalPages,
ShowPagesNum: 5,
onPageClicked:@(pager.PagerFun)
};
$('#pager').myPager(option);
</script>
</body>
</html>
主要是onPageClicked:@(pager.PagerFun)这一句,在Razor引擎顶部我们声明了pager变量,从控制器中传到视图层,强转之后把PagerFun变量赋给了插件的onPageClicked属性,插件内部识别它是一个函数就调用了,例子中PagerFun的值为”test”,效果是单击哪个按钮就弹出按钮代表的页码。

这只是其中一个函数,onPageChanged等都是可以的。第一次写,自己的js功底也并不是很深,借着bootstrap-paginator作者的源码学习了很多,代码也写得很优美!










