真正需要用到分页的时候才知道bootstrap-table插件的强大和便利之处,记录下使用过程,再次用到时少走弯路
官方源码地址:https://github.com/wenzhixin/bootstrap-table,里面有需要的js和css
先上一个项目截图吧:
用到的js和css文件有:
文件引用:
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js-->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap JavaScript文件 -->
<script src="js/bootstrap.min.js"></script>
<!-- bootstrap-table js文件 -->
<script src="js/bootstrap-table.js"></script>
<!-- bootstrap-table css文件 -->
<link rel="stylesheet" href="css/bootstrap-table.css">
<!-- bootstrap-table汉化文件,放在 bootstrap-table.js 后面 -->
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-table-export.js"></script>
<!-- tableExport -->
<script src="js/tableExport.js"></script>
HTML:
<div class="container-fluid">
<div id="toolbar"></div>
<table id="dataTable"></table>
</div>
1、服务端分页
js:
$(function(){
InitMainTable();
})
//设置传入参数
function queryParams(param) {
//String orderno, String startDate, String endDate, String customerId, Integer orderstatus, String page
var orderNo= $('#orderNo').val();
var startDate = $('#startDay').val();
var endDate = $('#endDay').val();
var customerId = $('#customerId').val();
var orderstatus = $('#orderStatus option:selected') .val();
if ( startDate > endDate){
alert("截止日期必须大于起始日期");
return false;
}
console.log({"page":((param.offset / param.limit) + 1),"orderNo":orderNo,"startDate":startDate,"endDate":endDate,"customerId":customerId,"orderstatus":orderstatus})
return {
limit : param.limit,
offset : param.offset,
page : (param.offset / param.limit) + 1,
orderNo : orderNo,
startDate : startDate,
endDate : endDate,
customerId : customerId,
orderstatus : orderstatus
};
}
//初始化bootstrap-table的内容
function InitMainTable () {
//销毁表格数据
$('#dataTable').bootstrapTable('destroy');// 销毁表格数据
//记录页面bootstrap-table全局变量$table,方便应用
$('#dataTable').bootstrapTable({
url: "getOrderInfo", //请求后台的URL(*)/deposit/
method: 'POST', //请求方式(*)
contentType : 'application/x-www-form-urlencoded',//post请求设置此项application/x-www-form-urlencoded
toolbar: '#toolbar', //工具按钮用哪个容器
icons: {refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt", columns: "glyphicon-list"},//设置刷新,切换,列图标
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页,并记录
pageSize: 10, //每页的记录行数(*)
pageList: [10], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: true, // 设置为 true启用 全匹配搜索,否则为模糊搜索
showColumns: true, //是否显示所有的列(选择显示的列)
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 800, //行高,如果没有设置height属性,表格自动根据记录条数决定表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams : queryParams,
paginationFirstText : "第一页",
paginationPreText : "上一页",
paginationNextText : "下一页",
paginationLastText : "最后一页",
showExport: true, //是否显示导出
exportDataType: "all", //basic', 'all', 'selected'.
columns: [{
title : '序号',
align: "center",
formatter: function (value, row, index) {
//获取每页显示的数量
var pageSize=$('#dataTable').bootstrapTable('getOptions').pageSize;
//获取当前是第几页
var pageNumber=$('#dataTable').bootstrapTable('getOptions').pageNumber;
//返回序号,注意index是从0开始的,所以要加上1
return pageSize * (pageNumber - 1) + index + 1;
}
},{
field: 'orderno',
title: '订单编号',
//sortable: true
}, {
field: 'customerid',
title: '客户编号(身份证号)',
}, {
field: 'customername',
title: '姓名',
}, {
field: 'customeraccno',
title: '支付账户',
},{
field: 'orderamount',
title: '订单金额',
}, {
field: 'paytime',
title: '支付时间',
},{
field: 'orderstatus',
title: '订单状态',
formatter: function (value) {
if(value==0){
return "待支付";
}else if(value==1){
return "支付中";
}else if(value==2){
return "支付成功";
}else if(value==3){
return "支付失败";
}
}
}, {
field: 'tranmsg',
title: '状态说明'
}],
onLoadSuccess: function (res) {
console.log(res)
if(res.errCode!="0000"){
alert(res.errMsg);
return false;
}
},
onLoadError: function () {
// showTips("数据加载失败!");
}
});
};
$(document).on('click', "#queryButton",function(){
console.log("Button")
$('#dataTable').bootstrapTable('refresh');
});
关于Controller的返回数据也有要求,返回数据一定要有total和rows这两项,否则会提示无匹配数据
2、客户端分页
在分页方式中设置为client即可,Controller返回数据只返回一个list,否则会提示无匹配数据、
3、导出
关于导出按钮,js中有详细说明,本项目中导出按钮设置在右上角,如图:
这里选择MS-Excel项就可以导出到excel文件里了。提示:服务端分页导出数据类型里面选择all是无效的,只能导出本页数据。