的页码
useBootstrapTooltip boolean,默认值为:false 是否使用bootstrap的提示框插件
shouldShowPage function,默认值为:true
函数三个参数:type, page, current,type的值为:first|prev|next|last|
page|turn|ellipsis,page的值为单击按钮时跳转的页码,current是跳转前
的页码
itemTexts function
可以修改页码的显示,如把type为first的文字改成'首页'
三个参数:type, page, current
tooltipTitles function
修改页码元素的title属性,默认有一个简单的实现,
三个参数:type, page, current
bootstrapTooltipOptions object
这个是把title注入到bootstrap的tooltip插件的模板
大部分都还是保持和bootstrap-paginator插件的属性。
下面怎么调用呢？给一个html的实例吧。
首先把定义的样式拿进来，就是上面那个，存一个文件，引入（也可以和你自己的css文件放在一起，可以减少http请求次数）。
<link href="https://www.jb51.net/~/Content/css/style.css" />
这些都是基于jquery的插件，并且要1.8以上的版本。
<script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.js"></script>
接下来就是引用我们最重要的js文件了。
<script src="https://www.jb51.net/~/Scripts/mypager.js"></script>
html中放一个div，这个div就是接下来要生成分页控件的父元素。记住一定是要div，bootstrap-paginator中bootstrap2是用div，bootstrap3是用ul。这里因为我们自己写的样式，就被我改成了必须是div。
<div></div>
写一个简单的调用脚本。
var option = { currentPage: 1, totalPages: 10, ShowPagesNum: 5 }; $('#pager').myPager(option);
HTML里的调用就到这里了。我用的是ASP.NET MVC，所以直接用Razor引擎把ViewData或者ViewBag的数据装载进js里就好了。当然，既然打算这样用了，最好在后端直接写一个类，我给个例子。
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 content="width=device-width" /> <link href="https://www.jb51.net/~/Content/css/style.css" /> <script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.js"></script> <title>Index</title> </head> <body> <div> </div> <script src="https://www.jb51.net/~/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>