前端：
@{ ViewBag.Title = "BootstrapTable 入門"; Layout = null; } <!-- 引入bootstrap樣式 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table樣式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文語言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> <div style=""> <div style="width:500px"> <!--定義table--> <table id="table"></table> </div> <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;"> <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default" style=""> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> </div> </div> @*<div> <table data-toggle="table" data-url=""> <thead> <tr> <th data-field="Name">姓名</th> <th data-field="Age">年齡</th> <th data-field="Work">職業</th> </tr> </thead> </table> </div>*@ <script> $("#table").bootstrapTable({ // 對應table標簽的id method: 'get', url: "/Home/GetTestDataPager", // 獲取表格數據的url contentType: "application/x-www-form-urlencoded",//一種編碼。好像在post請求的時候需要用到。這里用的get請求，注釋掉這句話也能拿到數據 dataField: "data",//這是返回的json數組的key.默認是"rows".這里只有前后端約定好就行 cache: false, // 設置為 false 禁用 AJAX 數據緩存， 默認為true striped: true, //表格顯示條紋，默認為false pagination: true, // 在表格底部顯示分頁組件，默認false pageList: [10, 20, 50, 100, 200, 500], // 如果設置了分頁，設置可供選擇的頁面數據條數。設置為All 則顯示所有記錄。 pageSize: 10, // 頁面數據條數 pageNumber: 1, // 初始化加載第一頁，默認第一頁 sidePagination: 'server', // 設置為服務器端分頁 客戶端：client search: false, toolbar: '#toolbar',//指定工具欄 searchOnEnterKey: true, //設置為 true時，按回車觸發搜索方法，否則自動觸發搜索方法 undefinedText: '---', //當數據為 undefined 時顯示的字符 singleSelect: false,//設置True 將禁止多選 clickToSelect: true,//設置true 將在點擊行時，自動選擇rediobox 和 checkbox height: 650, //定義表格的高度。 searchTimeOut: 500,// 默認500 設置搜索超時時間。 toolbarAlign: 'right',// 指定 toolbar 水平方向的位置。'left' 或 'right' paginationDetailHAlign: 'left',//指定 分頁詳細信息 在水平方向的位置。'left' 或 'right'。 showHeader: true,//是否顯示列頭。 trimOnSearch: true,//設置為 true 將自動去掉搜索字符的前后空格。 rowStyle: function (row, index) { var style = { // css: { 'height': '10px', 'font-size': 'small', 'classes':'danger'} }; return style; }, queryParams: function (params) { // 請求服務器數據時發送的參數，可以在這里添加額外的查詢參數，返回false則終止請求 return { pageSize: params.limit, // 每頁要顯示的數據條數 currentPage: params.offset / params.limit + 1, // 每頁顯示數據的開始行號 sort: params.sort, // 要排序的字段 sortOrder: params.order, // 排序規則 //dataId: $("#dataId").val() // 額外添加的參數 // search: params.search, //搜索框內容 } }, sortName: 'id', // 要排序的字段 sortOrder: 'desc', // 排序規則 columns: [ { checkbox: true, // 顯示一個勾選框 align: 'center' // 居中顯示 }, { radio: true, //設置為True的時候 則顯示一列radio組件，該列的寬度為固定寬度 align: 'center' // 居中顯示 }, { field: 'Name', // 要顯示數據的字段名稱，可以理解為json對象里的key title: '姓名', // 表格表頭顯示文字 align: 'center', // 左右居中 valign: 'middle', // 上下居中 visible: true }, { field: 'Age', title: '年齡', align: 'center', valign: 'middle' }, { field: 'Work', title: '職業', align: 'center', //設置單元格數據的左右對齊方式， 可選擇的值有：’left’, ‘right’, ‘center’ valign: 'middle', //設置單元格數據的上下對齊方式， 可選擇的值有：’top’, ‘middle’, ‘bottom’ formatter: function (value, row, index) { // 單元格格式化函數 //value： 該列的字段值； //row： 這一行的數據對象； // index： 行號，第幾行，從0開始計算 var text = '-'; if (value == 1) { text = "方式一"; } else if (value == 2) { text = "方式二"; } else if (value == 3) { text = "方式三"; } else if (value == 4) { text = "方式四"; } return value; }, cellStyle: function (value, row, index) { // cell的樣式設置,可以返回css或者classes return { css: { 'height': '10px', 'font-size': 'small' }, classes: 'danger' } }, events: function (value, row, index) { alert(value); } }, { title: "操作", align: 'center', valign: 'middle', width: 160, // 定義列的寬度，單位為像素px formatter: function (value, row, index) { return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.Age + '\')">刪除</button> <button class="btn btn-primary btn-sm" onclick="del(\'' + row.Age + '\')">刪除</button>'; }, cellStyle: function (value, row, index) { return { classes: 'danger' } } } ], onLoadSuccess: function (result) { //加載成功時執行 console.info("加載成功"); }, onLoadError: function () { //加載失敗時執行 console.info("加載數據失敗"); } }) </scrip
后台模擬分頁：
public JsonResult GetTestDataPager(int pageSize, int currentPage, string sort, string sortOrder)
{
PageEntity<ModelInfo> page = new PageEntity<ModelInfo>();
var data = GetmodelInfos().Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
page.data = data;
decimal totalPage = page.total * 1.00m / pageSize;
page.page = Convert.ToInt32(Math.Ceiling(totalPage));// page.total % pageSize > 0 ? (page.total / pageSize + 1) : (page.total / pageSize);
// 模仿分頁
return Json(page, JsonRequestBehavior.AllowGet);
}
private List<ModelInfo> GetmodelInfos()
{
List<ModelInfo> lst = new List<ModelInfo>();
for (int i = 0; i < 5000; i++)
{
lst.Add(new ModelInfo { Name = $"{i}_zheng", Age = i, Work = $"{i}_work" });
}
return lst;
}
public class ModelInfo
{
public string Name { get; set; }
public int Age { get; set; }
public string Work { get; set; }
}
}
public class PageEntity<T> where T : class
{
public List<T> data { get; set; }
public int page { get; set; }
public int total { get; set; }
}
}
展示：
