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

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

首先便是要下载Bootstrap Paginator了,下载地址:

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

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

部门列表

<div id="example">

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

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 Paginator插件的使用方法,希望对大家熟练掌握Bootstrap Paginator分页插件使用方法有所帮助。

相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap...
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所...
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不...
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有...
BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前...