bootstrap-paginator 分页
- 效果图
![](https://img2020.cnblogs.com/blog/916611/202004/916611-20200409160110772-539878174.jpg)
1. Demo前的准备
1.1. 编程环境
- VS2019
1.2. 准备
<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. 后台
namespace MvcPagingDemo.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; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcPagingDemo.Models;
namespace MvcPagingDemo.Controllers
{
public class HomeController : 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" />
6. 效果图
![](https://img2020.cnblogs.com/blog/916611/202004/916611-20200409160135208-1673986798.jpg)