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

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

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

首先便是要下载Bootstrap Paginator了，下载地址：Bootstrap Paginator分页插件

首先视图的上面应该需要引入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来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。

最后显示的效果如下图：

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。