参考资料: bootstrap table参数中文文档链接 - 作者:wyb880501
获取多选选中的数据
// json对象的数组
var rows = $('#table').bootstrapTable('getSelections');
修改没有数据的提示信息
$("#tableId").bootstrapTable({
...
formatNoMatches:function(){
return "你的自定义文字说明";
}
...
})
刷新列表
$('#table').bootstrapTable('refresh');
执行查询时刷新列表并返回第一页
踩过的坑:该方法在初次加载没有数据的情况下会失效。
$('#table').bootstrapTable('selectPage', 1);
推荐的方法:
$('#table').bootstrapTable('refreshOptions', {pageNumber: 1});
分页
function initTable(filter) {
$('#table').bootstrapTable({
classes: 'table table-no-bordered table-striped', //类名,通常用来定义样式
toolbar: '#toolbar', //功能栏
toolbarAlign: 'right',
pagination: true, //分页条显示
paginationHAlign: 'left',
paginationDetailHAlign: 'right', //分页详情位置
paginationPreText: '上一页',
paginationNextText: '下一页',
paginationLoop: false, //分页是否循环,默认true
formatNoMatches:function(){ //数据表中没有数据的显示文字
return "暂无数据";
},
url: constants.baseUrl + '/file/listFile', //请求数据的接口
cache: false, //数据缓存,默认true
method: 'get',
dataType: "json",
sortOrder: 'desc', //排序的方法,desc倒序,默认asc正序
queryParams: function (params) { //定义请求接口的参数
var temp = { // 这里的键的名字和控制器的变量名(接口传递的参数)必须一致
size: params.limit, // 页面大小
page: params.offset / params.limit, // 页码
sortField: params.sort, // 排序列名
sortBy: params.order.toUpperCase(), //正道序, 后台传递字段为大写格式
};
return temp;
},
responseHandler: function (res) { //返回成功后处理返回结果
if (res.data) {
return {
"rows" : res.data.content,
"total" : res.data.totalElements
};
} else {
return {
"rows" : [],
"total" : 0
};
}
},
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
sidePagination: 'server', //设置在哪里分页,默认‘client’,不在服务器端分页,适合静态数据
columns: [{
checkbox: true
}, {
field: 'id',
title: '序号',
formatter: function (value, row, index) {
var pageSize = $('#table').bootstrapTable('getOptions').pageSize; // 得到每页多少条
var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //页码
return pageSize * (pageNumber - 1) + index + 1;
},
width: 50
}, {
field: 'name',
title: '文件名称',
formatter: function (value, row, index) { //对返回值进行处理
return '<span title="' + value + '">' + value + '</span>'
}
}, {
field: 'type',
title: '文件类型',
width: 120,
formatter: function (value, row, index) {
if (value == 0) return '其他';
if (value == 1) return '文档';
if (value == 2) return '图片';
if (value == 3) return '视频';
if (value == 4) return '音频';
}
}, {
field: 'operate',
title: '操作',
width: 160,
formatter: function (value, row, index) {
var hindleBtn = [
'<button class="btn btn-link btn-xs" οnclick="viewItem(\'' + row.id + '\')">查看</button> ',
'<button class="btn btn-link btn-xs" οnclick="downloadItem(\'' + row.id + '\')">下载</button> ',
];
return hindleBtn.join('');
}
}]
});
};
合并单元格(跨列)
效果图:
columns: [[ {
field: "ship",
title: '船舶营运人',
align: 'center',
valign: 'middle',
rowspan: 2,
colspan: 1
}, {
field: "vehicleNumber",
title: '船舶类型',
align: 'center',
valign: 'middle',
rowspan: 2,
colspan: 1
}, {
field: "ferryVehicleNumber",
title: '是否投入运营',
align: 'center',
valign: 'middle',
rowspan: 1,
colspan: 3
}],
[{
field: "ferryTurnover",
title: '2019.2.9',
align: 'center',
valign: 'middle',
rowspan: 1,
colspan: 1
}, {
field: "ferrySeat",
title: '2019.2.10',
align: 'center',
valign: 'middle',
rowspan: 1,
colspan: 1
}, {
field: "ferrySeat",
title: '2019.2.11',
align: 'center',
valign: 'middle',
rowspan: 1,
colspan: 1
}]];