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

更新时间：2016年05月30日 09:08:15 作者：晓镜水月

这篇文章主要为大家详细介绍了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>&nbsp;</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>&nbsp;</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来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。

最后显示的效果如下图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是为大家分享的Bootstrap Paginator分页插件的使用方法，希望对大家熟练掌握Bootstrap Paginator分页插件使用方法有所帮助。

您可能感兴趣的文章:

Javascript中获取对象的原型对象的方法小结
这篇文章主要介绍了Javascript中获取对象的原型对象的方法小结,需要的朋友可以参考下
2015-02-02
js中document.write和document.writeln的区别
这篇文章主要介绍了js中document.write和document.writeln的区别,需要的朋友可以参考下
2018-03-03
js实现简单的选项卡效果
本文主要介绍了js实现简单的选项卡效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
DWR内存兼容及无法调用问题解决方案
这篇文章主要介绍了DWR内存兼容及无法调用问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
封装获取dom元素的简单实例
下面小编就为大家带来一篇封装获取dom元素的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
微信小程序全局变量改变监听的实现方法
这篇文章主要给大家介绍了关于微信小程序全局变量改变监听的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
JS中的函数与对象的创建方式
这篇文章主要介绍了JS中的函数与对象的创建方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
理解Javascript闭包
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制
2013-11-11
JS Canvas接口和动画效果大全
这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下
2021-04-04
微信小程序调用后台service教程详解
这篇文章主要介绍了微信小程序调用后台service教程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11