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 相关文章推荐
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
jquery validation验证表单插件
Jan 07 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
JavaScript隐式类型转换代码实例
May 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制作的意见反馈表源码
2007/03/11 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php中的ini配置原理详解
2014/10/14 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
flask实现验证码并验证功能
2019/12/05 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
法制宣传教育方案
2014/05/09 职场文书
电子专业自荐信
2014/07/01 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
银行授权委托书样本
2014/10/13 职场文书
企业介绍信范文
2015/01/30 职场文书
调任通知
2015/04/21 职场文书
工程质量保证书
2015/05/09 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python