bootstrap-paginator 分页
- 效果图
1. Demo前的准备
1.1. 编程环境
- VS2019
1.2. 准备
- 分页插件(bootstrap-paginator)下载: GitHub - lyonlai/bootstrap-paginator: Bootstrap Paginator is a jQuery plugin that simplifies the rendering of Bootstrap Pagination component. It provides methods to automates the update of the pagination status and also some events to notify the status changes within the component.
- 下载后找到
bootstrap-paginator-master\bootstrap-paginator-master\documentation\index.html
这个为该插件的详细介绍 - 找到包中以下文件并引用到项目中
<script src="~/Files/jquery-1.9.1.min.js"></script>
<script src="~/Files/bootstrap-paginator.js"></script>
<link href="~/Files/bootstrap.min.css" rel="stylesheet" />
2. 后台
Models层
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication12.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public string Adress { get; set; }
public string Email { get; set; }
public string Tel { get; set; }
public bool Sex { get; set; }
}
}
Controllers层
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication12.Models;
namespace MvcPagingDemo.Controllers
{
public class NameController : Controller
{
List<Student> stuList = new List<Student>
{
new Student{ Id=1, Name="张三", Sex=true, Adress="北京", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=2, Name="李四", Sex=true, Adress="上海", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=3, Name="王五", Sex=true, Adress="苏州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=4, Name="刘六", Sex=false , Adress="杭州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=5, Name="曹七", Sex=false , Adress="郑州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=6, Name="冯八", Sex=false , Adress="扬州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=7, Name="妲九", Sex=true, Adress="非洲", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=8, Name="万十", Sex=true, Adress="广州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=9, Name="妲九", Sex=true, Adress="非洲", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=10, Name="万十", Sex=true, Adress="广州", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=11, Name="妲九", Sex=true, Adress="非洲", Email="121@qq.com", Tel="18877222723" },
new Student{ Id=12, Name="万十", Sex=true, Adress="广州", Email="121@qq.com", Tel="18877222723" },
};
public ActionResult Index()
{
return View();
}
/// <summary>
/// 分页
/// </summary>
/// <param name="page">当前页</param>
/// <param name="pageSize">每页显示数</param>
/// <param name="total">查询数据的总行数</param>
/// <param name="totalPages">总页数</param>
/// <returns></returns>
public ActionResult StuListShow(int page = 1, int pageSize = 3)
{
int total = 0;
List<Student> list = stuList;
total = list.Count; //总数量
ViewBag.totalPages = (int)Math.Ceiling((decimal)(total) / pageSize);//总页数
var targets = list.Skip(pageSize * (page - 1)).Take(pageSize);
return PartialView(targets);
}
}
}
3. 前端之 先引入js等文件在 _Layout.cshtml
中
<script src="~/Files/jquery-1.9.1.min.js"></script>
<script src="~/Files/bootstrap-paginator.js"></script>
<link href="~/Files/bootstrap.min.css" rel="stylesheet" />
4. 前端之 添加分页插件配置(bootstrap-Paginator)
- 第一个div为分部视图,用于显示数据
- 第二个div为分页插件载体,用于显示分页插件
@{
ViewBag.title="Index" ;
}
<div id="data_table">
@Html.Action("StuListShow")
</div>
<div id="example"></div>
<script type='text/javascript'>
var options = {
currentPage: 1, //当前页
totalPages: $("#totalpage").val(), //总页数
bootstrapMajorVersion: 2, // bootstrap->版本2:必须要用div显示,版本3用ul
size: "normal", //大小:large,normal,small,mini
alignment: "center", //对齐方式
itemTexts: function (type, page, current)//页面项目文字
{
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "尾页";
case "page":
return page;
}
},
numberOfPages: 5, //通过属性numberOfPages可控制最大页面数。此属性仅接受整数。
onPageClicked: function (e, originalEvent, type, page)
{
// 异步方式 1
//$.post("/Home/StuListShow", { page: page, pageSize: 3 }, function (data) {
// $("#data_table").html(data);
//});
// 异步方式 2
$.ajax({
url: '/Home/StuListShow',
type: 'post',
data: { page: page, pageSize: 3 },
dataType: 'html',
success: function (data){
$("#data_table").html(data);
}
});
}
}
$('#example').bootstrapPaginator(options);
</script>
5、前端之 分部视图代码(StuListShow.cshtml)
@using MvcPagingDemo.Models
@model IEnumerable<MvcPagingDemo.Models.Student>
<table class="table table-hover table-bordered">
<tr>
<td>编号</td>
<td>姓名</td>
<td>电话</td>
<td>邮箱</td>
<td>地址</td>
</tr>
@foreach (var stu in Model)
{
<tr>
<td>@stu.Id</td>
<td>@stu.Name</td>
<td>@stu.Tel</td>
<td>@stu.Email</td>
<td>@stu.Adress</td>
</tr>
}
</table>
<input type="hidden" id="totalpage" value="@ViewBag.totalPages" />