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

作者:晓镜水月 时间:2023-09-05 23:08:42 

最近做的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>&nbsp;</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>&nbsp;</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来全局修改,这样管理起来也方便,另外对于页面这种属性:页码,当前页,数据数量等等的信息,可以做一个类来存储,如果网站的项目比较大的话,这样更加方便我们去更改自己的代码。

最后显示的效果如下图:

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

标签:Bootstrap,Paginator,分页,插件
0
投稿

猜你喜欢

  • PHP composer更新指定依赖包过程详细讲解

    2023-05-27 18:05:34
  • 在Visual Studio中使用GIT进行源码管理

    2022-09-24 19:28:02
  • Python脚本暴力破解栅栏密码

    2022-02-09 18:31:11
  • Tensorflow轻松实现XOR运算的方式

    2022-10-20 13:20:41
  • python检查字符串是否是正确ISBN的方法

    2022-05-10 14:54:01
  • Firefox 下 innerHTML 的一个 BUG

    2008-08-05 18:19:00
  • python字符串循环左移

    2023-08-28 19:32:13
  • 使用python计算三角形的斜边例子

    2023-01-25 01:33:19
  • JS实现给对象动态添加属性的方法

    2024-04-22 13:07:07
  • Python Web框架Flask信号机制(signals)介绍

    2022-12-01 13:52:23
  • asp导出CSV格式数据

    2008-12-24 21:25:00
  • 详细解读tornado协程(coroutine)原理

    2022-08-21 00:20:18
  • 99%的程序员都会收藏的书单 你读过几本?

    2022-10-01 19:45:59
  • Python实现计算文件夹下.h和.cpp文件的总行数

    2022-09-20 00:54:51
  • Python PyQt5运行程序把输出信息展示到GUI图形界面上

    2021-02-08 22:41:59
  • Python unittest单元测试框架及断言方法

    2023-10-29 12:07:48
  • Python离线安装PIL 模块的方法

    2023-02-19 22:38:37
  • 谦逊编程(翻译整理)

    2009-07-28 12:52:00
  • Python中typing模块与类型注解的使用方法

    2022-10-30 14:09:42
  • django框架model orM使用字典作为参数,保存数据的方法分析

    2021-03-11 00:18:30
  • asp之家 网络编程 m.aspxhome.com