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 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
基于Vue 实现一个中规中矩loading组件
Apr 03 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代码
2006/12/06 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
python模块smtplib学习
2018/05/22 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
政工例会汇报材料
2014/08/26 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
创业计划书之农家乐
2019/10/09 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server