bootstrap-paginator 分页 效果图 1. Demo前的准备 1.1. 编程环境 - VS2019 1.2. 准备 分页插件(bootstrap-paginator)下载: https://github.com/lyonlai/bootstrap-paginator 下载后找到 bootstrap-paginator-master\bootstrap-paginator-master\documentation\index.html 这个为该插件的详细介绍 找到包中以下文件并引用到项目中 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 stuList = new List { 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(); } ///

/// 分页 ///

/// 当前页 /// 每页显示数 /// 查询数据的总行数 /// 总页数 /// public ActionResult StuListShow(int page = 1, int pageSize = 3) { int total = 0; List 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 中 4. 前端之 添加分页插件配置（bootstrap-Paginator） 第一个div为分部视图，用于显示数据 第二个div为分页插件载体，用于显示分页插件 @{ ViewBag.title="Index" ; }

@Html.Action("StuListShow")

5、前端之 分部视图代码(StuListShow.cshtml) @using MvcPagingDemo.Models @model IEnumerable @foreach (var stu in Model) { }

编号	姓名	电话	邮箱	地址
@stu.Id	@stu.Name	@stu.Tel	@stu.Email	@stu.Adress

6. 效果图