一、bootstrapTable简单使用：
<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css">
<script src="./static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="./static/libs/bootstrap/js/bootstrap.js"></script>
<script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script>
<script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<div id="item_info_toolbar">
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#deptModal">创建</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#adm-user-create-user">编辑</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;">删除</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;">排序</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;" onclick="getSelectValue()">获取选中行值</a>
</div>
<table id="table" data-toggle="table" class="table table-striped">
<thead>
<tr>
</tr>
</thead>
</table><script>
$(\'#table\').bootstrapTable(\'destroy\').bootstrapTable({
url: \'data/\' + \'adm-user\' + \'.json\',
method: \'POST\',
uniqueId: \'id\', // 绑定ID，不显示
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
undefinedText: \'--\',
//singleSelect: true, // 单选checkbox，默认为复选
showRefresh : true, // 显示刷新按钮
showColumns : true, // 选择显示的列
toolbar: \'#item_info_toolbar\', // 搜索框位置
search: true, // 搜索开启,
strictSearch: true,
clickToSelect: true, // 点击选中行
pagination: true, //是否显示分页
pageNumber:1, //初始化加载第一页，默认第一页,并记录
pageSize:5,//每页显示的数量
pageList: [5, 10, 20, 50, 100],//设置每页显示的数量
paginationPreText:"上一页",
paginationNextText:"下一页",
paginationLoop:false,
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
//cardView: false, //是否显示详细视图
//detailView: false, //是否显示父子表
//showPaginationSwitch: true,
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
columns: [
{
checkbox: true
},{
field: \'username\',
title:\'用户名\',
valign: \'middle\',
width: \'16%\',
sortable: true
},{
field: \'fullname\',
title:\'姓名\',
width: \'16%\'
},{
field: \'status\',
title:\'密码认证\',
width: \'16%\'
},{
field: \'availableSpace\',
title:\'智能卡认证\',
valign: \'middle\',
width: \'16%\'
},{
field: \'totalSpace\',
title:\'个人空间配额\',
width: \'16%\'
},{
field: \'storageServer\',
title:\'私密空间配额\',
formatter: operateFormatter
}
],
onLoadSuccess: function () {
alert(\'表格加载成功！\');
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) {
var id = row.ID;
//EditViewById(id, \'view\');
},
rowStyle: function (row, index) { //设置行的特殊样式
//这里有5个取值颜色[\'active\', \'success\', \'info\', \'warning\', \'danger\'];
var strclass = "";
if (index == 1) {
strclass = "warning";
console.log(row);
}
return { classes: strclass }
}
});
function getSelectValue(){
var a = $table.bootstrapTable(\'getSelections\');//获取选中行的数据
if(a.length > 0){
console.log(a);
}
}
function operateFormatter (value, row, index) {
var result = \'<button class="btn btn-action" title="激活USBKEY认证" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>\'
return result;
}
</script>adm-user：
[
{
"id": 2018100701,
"username": "user1",
"fullname": "用户1",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100702,
"username": "user2",
"fullname": "用户2",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100703,
"username": "user3",
"fullname": "用户3",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100704,
"username": "user4",
"fullname": "用户4",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100705,
"username": "user5",
"fullname": "用户5",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100706,
"username": "user6",
"fullname": "用户6",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100707,
"username": "user7",
"fullname": "用户7",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100708,
"username": "user8",
"fullname": "用户8",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100709,
"username": "user9",
"fullname": "用户9",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100710,
"username": "user10",
"fullname": "用户10",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100711,
"username": "user11",
"fullname": "用户11",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
}
]二、 利用bootstrapTable来设置要隐藏和显示的列：
$(function () {
//初始化table
LoadingDataListOrderRealItems();
//隐藏列
$(\'#tableOrderRealItems\').bootstrapTable(\'showColumn\', \'ShopName\');
$(\'#tableOrderRealItems\').bootstrapTable(\'hideColumn\', \'GoodsId\');
$(\'#tableOrderRealItems\').bootstrapTable(\'hideColumn\', \'OrderItemId\');
$(\'#tableOrderRealItems\').bootstrapTable(\'hideColumn\', \'ShopName\');
$(\'#tableOrderRealItems\').bootstrapTable(\'hideColumn\', \'SellerName\');
}); 三、 也可以直接使用hidden属性来设置：
columns: [
{
field: \'OrderId\',
title: \'#\',
align: \'center\',
}, {
field: \'OrderItemId\',
title: \'OrderItemId\',
align: \'left\',
hidden:true,
}, {
field: \'GoodsId\',
title: \'GoodsId\',
align: \'left\',
hidden:true,
}, {
field: \'OrderCode\',
title: \'订单编号\',
align: \'left\',
}
]四、如何获取数据：
方式一：表格中配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="table"
data-toggle="table"
data-url="data/table.json"
data-pagination="true"
data-page-number=1
data-page-size=10
data-search=true
data-show-refresh=true
data-show-pagination-switch=true
data-search-align="left"
>
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="name">name</th>
<th data-field="price">price</th>
<th data-field="column1">column1</th>
<th data-field="column2">column2</th>
<th data-field="column3">column3</th>
<th data-field="column4">column4</th>
</tr>
</thead>
</table>
<script>
$(function () {
//隐藏列
$(\'#table\').bootstrapTable(\'hideColumn\', \'column4\');
})
</script>
</body>
</html>方式二：JavaScript配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<button onclick="getData(\'table2\')">点击获取数据</button>
<table id="table" data-toggle="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="name">name</th>
<th data-field="price">price</th>
<th data-field="column1">column1</th>
<th data-field="column2">column2</th>
<th data-field="column3">column3</th>
<th data-field="column4">column4</th>
</tr>
</thead>
</table>
<script>
function getData(url){
$(\'#table\').bootstrapTable(\'destroy\').bootstrapTable({ //\'destroy\' 是必须要加的==作用是加载服务器// //数据，初始化表格的内容Destroy the bootstrap table.
url: \'data/\' + url + \'.json\',
pagination: true,
pageList:[],
pageNumber:1,
pageSize:5,//每页显示的数量
paginationPreText:"上一页",
paginationNextText:"下一页",
paginationLoop:false,
columns: [
{
field: \'id\',
title:\'id\',
valign: \'middle\',
},{
field: \'name\',
title:\'name\'
},{
field: \'price\',
title:\'price\'
},{
field: \'column1\',
title:\'请求内容\'
},{
field: \'column2\',
title:\'请求内容\'
},{
field: \'column3\',
title:\'请求内容\'
},{
field: \'column4\',
title:\'请求内容\'
}
]
})
}
</script>
</body>
</html>