bootstrap-table基本介绍
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况，总结相关使用中碰到的问题处理经验。
数据显示方式
Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。
客户端模式：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全数据搜索。对于数据量较少的时候，可以使用这个方法。
服务器模式：指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，在进行查询时，会发送一次的查询请求到服务器端进行查询，根据服务器端返回结果加载页面。
相关依赖
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
bootstrap-table 使用
HTML代码：
<table id="myTable" class="table table-hover text-nowrap"></table>
json数据:
{
"message": "查询成功",
"code": "200",
"data": [{
"id": "1",
"blogUrl": "https://www.sojson.com/",
"blogWorkName": "2",
}]
}
服务器前端分页JS代码加载表格内容：
$(‘#myTable‘).bootstrapTable({
method: ‘post‘, //以post的方式发送请求
url: url, //url地址，可以是接口也可以是本地json文件
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sortable: true, //是否可排序
search: true, //是否可查询
showColumns: true, //筛选要显示的列
showSearchClearButton: true, //显示搜索清除按钮
pageSize: 10, // 默认单页记录数
pageList: [10, 15, 20], //分页可选页数
sidePagination: "client", //表示客户端请求
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
onLoadSuccess: function(){ //加载成功时执行
layer.msg("加载成功");
},
onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
//该项返回的为数据源内的二级列表data
if (res.code == "200"){
return res.data;
}else {
//显示报错信息
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //换页按钮设置
paginationHAlign: ‘left‘,
paginationDetailHAlign: ‘right‘,
paginationPreText: ‘上一页‘,
paginationNextText: ‘下一页‘,
columns: [{
checkbox: true //左侧复选框，用于多选操作
}, {
title: ‘博客ID‘, //表头名称
field: ‘id‘, //该列填充的数据
align: ‘center‘, //数据内容居中
},{
title: ‘博客链接‘,
field: ‘blogUrl‘,
//列表显示的是“原文链接”字样的可点击链接
formatter: function (value, row, index) {
var result = "";
result += ‘<a style="color: #0a53be" href="‘+value+‘">原文链接</a>‘;
return result;
},
align: ‘center‘,
}, {
title: ‘博客名‘,
field: ‘blogWorkName‘,
align: ‘center‘,
}
]
});
样式：
与客户端分页不同，服务器端分页需要设置分页查询的参数，sidePagination的值为server。
服务器端分页JS代码加载表格内容:
$(‘#myTable‘).bootstrapTable({
method: ‘post‘, //以post的方式发送请求
url: url, //url地址，可以是接口也可以是本地json文件
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sortable: true, //是否可排序
search: true, //是否可查询
showColumns: true, //筛选要显示的列
showSearchClearButton: true, //显示搜索清除按钮
pageSize: 10, // 默认单页记录数
pageList: [10, 15, 20], //分页可选页数
sidePagination: "server", //表示服务端请求
contentType: "application/x-www-form-urlencoded",//必须要有，请求数据格式
queryParamsType : "undefined", //设置请求数据类型
queryParams: function queryParams(params) { //设置请求数据
var param = {
pageNum: params.pageNumber, //服务器端分页所需要的的两个参数
pageSize: params.pageSize,
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return param;
},
onLoadSuccess: function(){ //加载成功时执行
layer.msg("加载成功");
},
onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
//该项返回的为数据源内的二级列表data
if (res.code == "200"){
return res.data;
}else {
//显示报错信息
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //换页按钮设置
paginationHAlign: ‘left‘,
paginationDetailHAlign: ‘right‘,
paginationPreText: ‘上一页‘,
paginationNextText: ‘下一页‘,
columns: [{
checkbox: true //左侧复选框，用于多选操作
}, {
title: ‘博客ID‘, //表头名称
field: ‘id‘, //该列填充的数据
align: ‘center‘, //数据内容居中
},{
title: ‘博客链接‘,
field: ‘blogUrl‘,
//列表显示的是“原文链接”字样的可点击链接
formatter: function (value, row, index) {
var result = "";
result += ‘<a style="color: #0a53be" href="‘+value+‘">原文链接</a>‘;
return result;
},
align: ‘center‘,
}, {
title: ‘博客名‘,
field: ‘blogWorkName‘,
align: ‘center‘,
}
]
});
当后端传给前端的数据有着多重嵌套时，简单的返回二级数组中的数据显然不能满足我们的需求，我们可以对数据进行进一步处理，将所要的数据放在一个新建对象数组中：
responseHandler:function(res){
if (res.code == "200"){
var userInfo = res.data;
var NewData = [];
if (userInfo.length){
for (var i = 0; i < userInfo.length; i++){
var dataNewObj = { //自己定义的一个对象，用于存放数据
"id": ‘‘,
"username": ‘‘,
"classId": ‘‘,
"score": ‘‘,
};
dataNewObj.id = userInfo[i].user.account;
dataNewObj.username = userInfo[i].user.userName;
dataNewObj.classId = userInfo[i].user.classRoom.className;
dataNewObj.score = userInfo[i].score.score;
NewData.push(dataNewObj); //将对象存到数组中
}
}
var data = {
rows:NewData,
};
return data;
}else {
layer.msg(res.message, {time : 1500, icon : 2});
return false;
}
},