1、引入相关的css和js
<link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.css" rel="stylesheet" /> <script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="/components/bootstrap/3.3.7/css/bootstrap.min.js"></script> <script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="components/bootstrap-table/1.11.1/dist/bootstrap-table-zh-CN.js"></script>
2、第一种方法:
<table id="tablewrap1" data-toggle="table" data-locale="zh-CN" data-ajax="ajaxRequest" data-icon-size="sm" data-single-select="false" data-click-to-select="true" data-side-pagination="server" data-striped="true" data-pagination="true" data-maintain-selected="true" class="fline-show-when-ready table" > <thead> <tr> <!--<th data-field="state1" data-checkbox="true"></th>--> <th data-field="field">名称</th> <th data-field="fieldName">中文名称</th> <th data-field="identifier">标识符</th> <th data-field="affiliatedName">单位</th> <th data-field="typeName">分类</th> <th data-field="state1" data-checkbox="true"></th> </tr> </thead> </table>
说明:
data-locale="zh-CN" 选择中文
data-ajax="ajaxRequest" 页面加载表格的数据
data-icon-size="sm" 图标的大小
data-side-pagination="server" 服务器分页方式 “server” 和 “client” 后台分页和前端分页
data-click-to-select="true" 是否点击选中
data-pagination=“true” 是否分页
详细的api参考 https://bootstrap-table.com/docs/api/table-options/
3、js代码
function ajaxRequest(params) { var pageSize = params.data.limit; var pageNum = params.data.offset / pageSize + 1; index = params.data.offset + 1; var sort = params.data.sort ? params.data.sort : "id"; var order = params.data.order ? params.data.order : "desc"; var dataStr = 'pageNum=' + pageNum + '&pageSize=' + pageSize; var count; $.ajax({ type : 'get', url : 'url', dataType : 'json', async : false, data : { 'pageNum':pageNum, 'pageSize':pageSize, }, success : function(data) { var count = 0, dataElements = data.data; params.success({ total : count, rows : dataElements }); } }); }
4、第二种方法
$("#tablewrap").bootstrapTable({ url: url, pagination: true, sidePagination: 'server', clickToSelect: true, pageNumber: 1, pageList: "[10, 25, 50, 100, All]", columns: getTitle(param), queryParams: function (params) { // url中传的参数 var temp = { rows: params.limit, //页面大小 start: params.offset, page: (params.offset / params.limit) + 1 //页码 } return temp }, responseHandler: function(res) { // 请求到的数据进行加工,格式必须是{rows: [], total: 0} var data = []; if (res ) { data = { rows: res.response.docs, total: res.response.numFound } } return data; } })
5、client分页和server分页的写法区别
// server 分页 sidePagination: 'server', responseHandler: function (res) { var data = { rows: res.data, // 要显示的数据的list total: res.data.count // 总条数 }; return data; }, // client分页 sidePagination: 'client', responseHandler: function (res) { return res.data; // 要显示的数据的list, 没有总条数 },