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 String 的扩展方法集合
Jun 01 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
a标签调用js的方法总结
Sep 05 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
JavaScript分页组件使用方法详解
Jul 26 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生成EXCEL的东东
2006/10/09 PHP
php中require和require_once的区别说明
2014/02/27 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
Python常用模块用法分析
2014/09/08 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js