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=https://www.cnblogs.com/zgsy/p/"~/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=https://www.cnblogs.com/zgsy/p/"~/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=https://www.cnblogs.com/zgsy/p/"@ViewBag.totalPages" />
6. 效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1678.html
標籤：ASP.NET MVC