前端：
@{ 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; }
}
}
展示：
