Bootstrap-Table本身不帶跳轉頁的功能，所幸在網上找到了bootstrap-table-pagejump這個插件，依靠這個插件可以輕鬆實現跳轉功能，如下圖所示：
bootstrap-table-pagejump下載
鏈接：https://pan.baidu.com/s/1iFS2ak3KiWPO1zzKgxp2Rw
提取碼：e1ek
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>Bootstrap Table</title>
<!-- bootstrap -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap-table-pagejump -->
<link href="lib/bootstrap-table-pagejump/bootstrap-table-pagejump.css" rel="stylesheet" />
<script src="lib/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script>
</head>
<body>
<div style="margin-left:100px;margin-top:100px;width:1200px;">
<table id="table"></table>
</div>
<script>
$('#table').bootstrapTable({
url: "ashx/LoadDataHandler.ashx", // URL
method: "post", // 請求類型
contentType: "application/x-www-form-urlencoded", // post請求必須要有，否則後臺接受不到參數
sidePagination: "server", // 設置在服務端還是客戶端分頁
showRefresh: false, // 是否刷新按鈕
sortStable: true, // 是否支持排序
cache: false, // 是否使用緩存
pagination: true, // 是否顯示分頁
search: false, // 是否有搜索框
clickToSelect: true, // 是否點擊選中行
paginationShowPageGo: true, // 跳轉到
pageNumber: 1, // 首頁頁碼，默認爲1
pageSize: 10, // 頁面數據條數
pageList: [10, 20, 30],
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize, // 每頁記錄條數
pageNumber: params.pageNumber // 當前頁索引
};
},
columns: [{
field: "select",
title: "全選",
align: "center",
halign: "center",
checkbox: true,
},
{
field: 'Id',
title: '編號',
align: "center",
halign: "center",
sortable: true
},
{
field: 'Name',
title: '姓名',
align: "center",
halign: "center"
},
{
field: 'Gender',
title: '性別',
align: "center",
halign: "center"
},
{
field: 'Age',
title: '年齡',
align: "center",
halign: "center"
},
{
field: 'PhoneNumber',
title: '手機號',
align: "center",
halign: "center"
}]
})
</script>
</body>
</html>
後臺代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication1.ashx
{
/// <summary>
/// LoadDataHandler 的摘要說明
/// </summary>
public class LoadDataHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 獲取參數
int pageSize = int.Parse(context.Request["pageSize"].ToString());
int pageNumber = int.Parse(context.Request["pageNumber"].ToString());
// 模擬數據
List<Person> list = new List<Person>();
list.Add(new Person() { Id = 1, Name = "AAAA", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 2, Name = "BBBB", Gender = "女", Age = 23, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 3, Name = "CCCC", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 4, Name = "DDDD", Gender = "女", Age = 24, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 5, Name = "EEEE", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 6, Name = "FFFF", Gender = "女", Age = 32, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 7, Name = "GGGG", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 8, Name = "HHHH", Gender = "女", Age = 26, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 9, Name = "IIII", Gender = "男", Age = 28, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 10, Name = "JJJJ", Gender = "女", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 11, Name = "KKKK", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 12, Name = "LLLL", Gender = "女", Age = 92, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 13, Name = "MMMM", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 14, Name = "NNNN", Gender = "女", Age = 42, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 15, Name = "OOOO", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 16, Name = "PPPP", Gender = "女", Age = 52, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 17, Name = "QQQQ", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 18, Name = "RRRR", Gender = "女", Age = 62, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 19, Name = "SSSS", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 20, Name = "TTTT", Gender = "女", Age = 32, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 21, Name = "UUUU", Gender = "男", Age = 42, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 22, Name = "VVVV", Gender = "女", Age = 62, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 23, Name = "WWWW", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 24, Name = "XXXX", Gender = "女", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 25, Name = "YYYY", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 26, Name = "ZZZZ", Gender = "女", Age = 22, PhoneNumber = "123456789" });
// 模擬分頁
var data = new
{
total = list.Count,
rows = list.Skip((pageNumber - 1) * pageSize).Take(pageSize)
};
context.Response.Write(JsonConvert.SerializeObject(data));
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Person
{
/// <summary>
/// 編號
/// </summary>
public int Id { get; set; }
/// <summary>
/// 姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 性別
/// </summary>
public string Gender { get; set; }
/// <summary>
/// 年齡
/// </summary>
public int Age { get; set; }
/// <summary>
/// 手機號
/// </summary>
public string PhoneNumber { get; set; }
}
}
中文化
如果按照上述操作執行，你應該會得到這樣的結果：
對於中文環境，這樣的顯示效果很顯然是不友好的，因此我們需要打開bootstrap-table-pagejump.js文件，修改其中的兩處地方：如下圖所示：
到此爲止，bootstrap-table-pagejump的中文化就完成了，效果如下圖所示：
