博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap Paginator分页插件使用示例
阅读量:6308 次
发布时间:2019-06-22

本文共 1772 字,大约阅读时间需要 5 分钟。

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能。

首先便是要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载:

首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator的js文件。其中网上搜到,貌似jquery必须要1.8版本以上,这个我没有亲自去测试看过。于是视图的文件引用便:

然后,分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们,当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页,这次也应该有点不同。

 

而在视图的主体部分便有两个div,一个用来呈现数据列表,一个用来放置选择页面的导航。


而后台这个GetDate的方法就像下面这样:

public ActionResult GetDate(int id, int? page)        {            int pageIndex = page ?? 1;//当前页            const int pageSize = 2;//这里用来设置每页要展示的数据数量,建议把这个写到web.config中来全局控制            //获取需要展示的部门数据            IEnumerable
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的这个插件的开发文档找了好久都找不到,不像之前EasyUI那样文件比较多,而且例子在文档中也比较详细了,xmfdsh我正打算找个时间来总结下自己写的一套分页的做法,那样就不用仅仅拘束于这些写好的框架。

转载于:https://www.cnblogs.com/xmfdsh/p/4041187.html

你可能感兴趣的文章
Java反射简介
查看>>
react脚手架应用以及iview安装
查看>>
shell学习之用户管理和文件属性
查看>>
day8--socket网络编程进阶
查看>>
node mysql模块写入中文字符时的乱码问题
查看>>
仍需"敬请期待"的微信沃卡
查看>>
分析Ajax爬取今日头条街拍美图
查看>>
内存分布简视图
查看>>
POJ 2918 求解数独
查看>>
如何学习虚拟现实技术vr? vr初级入门教程开始
查看>>
第4 章序列的应用
查看>>
Mysql explain
查看>>
初识闭包
查看>>
java tcp socket实例
查看>>
011 指针的算术运算
查看>>
hdu1874畅通工程续
查看>>
rails 字符串 转化为 html
查看>>
java-学习8
查看>>
AOP动态代理
查看>>
Oracle序列
查看>>