bootstrap-paginator 分页+MVC

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="[email protected]", Tel="18877222723" },
         new Student{  Id=2, Name="李四", Sex=true, Adress="上海", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=3, Name="王五", Sex=true, Adress="苏州", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=4, Name="刘六", Sex=false , Adress="杭州", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=5, Name="曹七", Sex=false , Adress="郑州", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=6, Name="冯八", Sex=false , Adress="扬州", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=7, Name="妲九", Sex=true, Adress="非洲", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=8, Name="万十", Sex=true, Adress="广州", Email="[email protected]", Tel="18877222723" },
           new Student{  Id=9, Name="妲九", Sex=true, Adress="非洲", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=10, Name="万十", Sex=true, Adress="广州", Email="[email protected]", Tel="18877222723" },
           new Student{  Id=11, Name="妲九", Sex=true, Adress="非洲", Email="[email protected]", Tel="18877222723" },
         new Student{  Id=12, Name="万十", Sex=true, Adress="广州", Email="[email protected]", 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. 效果图