Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。
首先便是要下载Bootstrap Paginator了，下载地址：Bootstrap Paginator分页插件
首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：

<link href="css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="js/jquery-1.8.1.js"></script><script type="text/javascript" src="js/bootstrap-paginator.js"></script>

然后，分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们，当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页，这次也应该有点不同。

<script> $（function （） { var carId = 1; $.ajax（{url: "/OA/Setting/GetDate",datatype: "json",type: "Post",data: "id=" + carId,success: function （data） {if （data ！= null） { $.each（eval（"（" + data + "）"）.list, function （index, item） { //遍历返回的json $（"#list"）.append（"<table id="data_table" class="table table-striped">"）; $（"#list"）.append（"<thead>"）; $（"#list"）.append（"<tr>"）; $（"#list"）.append（"<th>Id</th>"）; $（"#list"）.append（"<th>部门名称</th>"）; $（"#list"）.append（"<th>备注</th>"）; $（"#list"）.append（"<th> </th>"）; $（"#list"）.append（"</tr>"）; $（"#list"）.append（"</thead>"）; $（"#list"）.append（"<tbody>"）; $（"#list"）.append（"<tr>"）; $（"#list"）.append（"<td>" + item.Id + "</td>"）; $（"#list"）.append（"<td>" + item.Name + "</td>"）; $（"#list"）.append（"<td>备注</td>"）; $（"#list"）.append（"<td>"）; $（"#list"）.append（"<button class="btn btn-warning" onclick="Edit（" + item.Id + " ）;">修改</button>"）; $（"#list"）.append（"<button class="btn btn-warning" onclick="Edit（" + item.Id + " ）;">删除</button>"）; $（"#list"）.append（"</td>"）; $（"#list"）.append（"</tr>"）; $（"#list"）.append（"</tbody>"）; $（"#list"）.append（"<tr>"）; $（"#list"）.append（"<td>内容</td>"）; $（"#list"）.append（"<td>" + item.Message + "</td>"）; $（"#list"）.append（"</tr>"）; $（"#list"）.append（"</table>"）; }）; var pageCount = eval（"（" + data + "）"）.pageCount; //取到pageCount的值（把返回数据转成object类型） var currentPage = eval（"（" + data + "）"）.CurrentPage; //得到urrentPage var options = { bootstrapMajorVersion: 2, //版本 currentPage: currentPage, //当前页数 totalPages: pageCount, //总页数 itemTexts: function （type, page, current） {switch （type） {case "first": return "首页";case "prev": return "上一页";case "next": return "下一页";case "last": return "末页";case "page": return page;} },//点击事件，用于通过Ajax来刷新整个list列表 onPageClicked: function （event, originalEvent, type, page） {$.ajax（{url: "/OA/Setting/GetDate?id=" + page,type: "Post",data: "page=" + page,success: function （data1） { if （data1 ！= null） { $.each（eval（"（" + data + "）"）.list, function （index, item） { //遍历返回的json$（"#list"）.append（"<table id="data_table" class="table table-striped">"）;$（"#list"）.append（"<thead>"）;$（"#list"）.append（"<tr>"）;$（"#list"）.append（"<th>Id</th>"）;$（"#list"）.append（"<th>部门名称</th>"）;$（"#list"）.append（"<th>备注</th>"）;$（"#list"）.append（"<th> </th>"）;$（"#list"）.append（"</tr>"）;$（"#list"）.append（"</thead>"）;$（"#list"）.append（"<tbody>"）;$（"#list"）.append（"<tr>"）;$（"#list"）.append（"<td>" + item.Id + "</td>"）;$（"#list"）.append（"<td>" + item.Name + "</td>"）;$（"#list"）.append（"<td>备注</td>"）;$（"#list"）.append（"<td>"）;$（"#list"）.append（"<button class="btn btn-warning" onclick="Edit（" + item.Id + " ）;">修改</button>"）;$（"#list"）.append（"<button class="btn btn-warning" onclick="Edit（" + item.Id + " ）;">删除</button>"）;$（"#list"）.append（"</td>"）;$（"#list"）.append（"</tr>"）;$（"#list"）.append（"</tbody>"）;$（"#list"）.append（"<tr>"）;$（"#list"）.append（"<td>内容</td>"）;$（"#list"）.append（"<td>" + item.Message + "</td>"）;$（"#list"）.append（"</tr>"）;$（"#list"）.append（"</table>"）; }）; }}}）; } }; $（"#example"）.bootstrapPaginator（options）;}} }）; }）</script>

而在视图的主体部分便有两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。

<div class="span9"> <label>部门列表</label> <hr /> <div id="list"></div> <div id="example"></div> </div>

而后台这个GetDate的方法就像下面这样：

public ActionResult GetDate（int id, int? page） {int pageIndex = page ?? 1;//当前页const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制//获取需要展示的部门数据IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList（pageIndex, pageSize, x => x.Id！=null, x=>x.Id）;//得到数据的条数int rowCount = list.Count（）;//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算if（rowCount%pageSize！=0）{rowCount = rowCount / pageSize + 1;}else{rowCount = rowCount / pageSize;}//转成Json格式var strResult = "{"pageCount":"+rowCount+","CurrentPage":"+pageIndex+","list":" + JsonConvert.SerializeObject（list） + "}";return Json（strResult, JsonRequestBehavior.AllowGet）; }

这个方法还是有点缺陷的，可以写的更加完美，就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。
最后显示的效果如下图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程
以上就是为大家分享的Bootstrap Paginator分页插件的使用方法，希望对大家熟练掌握Bootstrap Paginator分页插件使用方法有所帮助。