Bootstrap Paginator分页插件使用方法详解
更新时间：2016年05月30日 09:08:15 作者：晓镜水月
这篇文章主要为大家详细介绍了Bootstrap Paginator分页插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近做的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来全局修改，这样管理起来也方便，另外对于页面这种属性：页码，当前页，数据数量等等的信息，可以做一个类来存储，如果网站的项目比较大的话，这样更加方便我们去更改自己的代码。
最后显示的效果如下图：
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是为大家分享的Bootstrap Paginator分页插件的使用方法，希望对大家熟练掌握Bootstrap Paginator分页插件使用方法有所帮助。
相关文章
本文给大家分享一段JS实例代码介绍动态创建按钮的方法，需要的朋友参考下本文2016-01-01
建造者模式是设计模式的一种，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍JavaScript的设计模式经典之建造者模式，感兴趣的朋友一起学习吧2016-02-02
这篇文章主要介绍了JavaScript判断undefined类型的正确方法,相信很多同学在遇到这问题时都会用到错误的方法,正确方法也很简单,需要的朋友可以参考下2015-06-06
下面小编就为大家分享一篇JS原型继承四步曲及原型继承图一览，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家介绍了JS表单提交中onsubmit事件return的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
javascript中数组是没有indexOf方法，extjs中给数据添加了该方法2012-07-07
这篇文章主要介绍了JS出现404错误原理及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了微信小程序实现给嵌套template模板传递数据的方式,结合实例形式总结分析了微信小程序嵌套template模板的定义、调用、参数传递及相关使用技巧,需要的朋友可以参考下2017-12-12
这篇文章主要给大家介绍了关于js判断两个数组是否存在相同元素的四种方法,js中是不能直接用==或者===来计算两个数组是否相等的,那么就需要对数组的值进行比较,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了微信小程序自定义tabBar在uni-app的适配详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论