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 這個為該插件的詳細介紹
• 找到包中以下文件並引用到項目中

   <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="[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();
     }
     /// <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. 效果圖