Bootstrap Paginator分页插件使用方法详解
作者:晓镜水月 发布时间:2023-09-05 23:08:42
标签: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来全局修改,这样管理起来也方便,另外对于页面这种属性:页码,当前页,数据数量等等的信息,可以做一个类来存储,如果网站的项目比较大的话,这样更加方便我们去更改自己的代码。
最后显示的效果如下图:
0
投稿
猜你喜欢
- Ajax类  
- 关于这个问题的解答,网络上有成千上万个版本,当然,出现问题的诱因不同,解决的途径也不同,所以我不排除其他解决此类问题的办法,但是这些办法都没
- 无论是 DAO 还是 ADO 都有两种从 Recordset 对象中查询记录的方法: Find 方法和 Seek 方法。在这两种方法中可以让
- 采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值&g
- 学习目的 学会SQL中的占位符用法 在鲸鱼这几天忙死了,好几天没写了,真对不起各位。这几天让XHTML闹得不开心,虽然以前也知道这个,但没太
- 问:怎样才能指定MySQL只监听某个特定地址?答:比较常见的办法是,在my.cnf之mysqld节,添加bind-address=127.0
- 本游戏程序实现的功能为本地二人对弈中国象棋,实现语言为javascript+VML,在windows 2000 pro+IE 6sp1的环境
- 以下的文章主要是介绍SQL Server数据库与其实际应用元数据,我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料,
- 一、引言Server端的脚本运行环境,它简单易用,不需要编译和连接,脚本可以在 Server端直接运行,并且它支持多用户、多线程,因为 AS
- 这个代码不是很完善,能实现基本的功能;另外有个问题,就是divOpenWin层的定位问题:发现如果其属性设置成display:none,那么
- 有一个表,用户需要在后台操作它,希望能对它动态进行添加删除字段。这个功能也许没有问题,但是它原有插入与更新的两个存储过程,也需要一起修改。因
- 这是一个access较为豪华的包装范例,他调用了flash的流媒体控件,利用flash的交互与通信功能,借以达到了我们装扮软件的目的。fla
- 本文实例讲解了php表单验证的实现方法,分享给大家供大家参考,具体内容如下1.PHP表单处理welcome.html<html>
- 从接触互联网开始,一直在关注每个网站页面浏览速度,不管大小国内外网站,而且每个用户的浏览时间都不一样,从而了解用户在浏览页面上时间体验尺度的
- 微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号)声明•微信小程序开发工具类似于一个轻量级的IDE集成开发环境,
- 线程Threading用于提供线程相关的操作。线程是应用程序中工作的最小单元,它被包含在进程之中,是进程中的实际运作单位。一条线程指的是进程
- 表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等,这时候就要用到表单验
- 5月20日,微软正式提供了Windows XP下可用的雅黑字体下载,雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问
- 本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下CSS样式:<style> .cont{margin:
- 微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实