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


Posted in Javascript onMay 30, 2016

最近做的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 Paginator分页插件使用方法详解

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

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

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
小程序自定义弹框效果
Nov 16 Javascript
JS ES6异步解决方案
Apr 29 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 #Javascript
js实现页面a向页面b传参的方法
May 29 #Javascript
浅析jQuery中使用$所引发的问题
May 29 #Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 #Javascript
jQuery实现图像旋转动画效果
May 29 #Javascript
You might like
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js输出列表实现代码
2010/09/12 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python 面向对象 成员的访问约束
2008/12/23 Python
Python contextlib模块使用示例
2015/02/18 Python
Python实现八大排序算法
2016/08/13 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python opencv进行图像拼接
2020/03/27 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python中常用的数据结构介绍
2021/01/12 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
劳动模范事迹材料
2014/01/19 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
护士自我鉴定总结
2014/03/24 职场文书
科学发展观活动总结
2014/08/28 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2016年感恩节寄语
2015/12/07 职场文书
人力资源部工作计划
2019/05/14 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android