本人前端菜鸟一枚，最近使用bootstrap table实现表格，记录一下以便日后翻阅，废话不多说，先看效果图：
1、首先说下要实现该效果需要添加的css样式及所需的js文件，具体下载地址就不粘贴了(因为太懒)
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
2、html页面中需要准备的元素如下：
<div class="container">
<!--存放工具栏-->
<div id="toolbar"></div>
<!--存放生成的表格-->
<table id="searchResults" class="table table-hover">
</table>
</div>
3、万事俱备只欠东风，东风就是数据问题，这里有一点需要注明，客户端（client）的数据和服务端（server）的数据格式略有差异，这里展示出来以供参考（本人使用的是客户端的数据)。
客户端数据格式（clientJson.json）：
[
{
"id": 0,
"name": "李雷",
"sex": "男",
"age": "12",
"cls": "一年级",
"score": "81",
"action": "操作"
},
{
"id": 1,
"name": "韩梅梅",
"sex": "女",
"age": "11",
"cls": "一年级",
"score": "90",
"action": "操作"
}
]
服务端数据格式（serverJson.json）:
{
"total": 2,
"rows": [
{
"id": 0,
"name": "李雷",
"sex": "男",
"age": "12",
"cls": "一年级",
"score": "81"
},
{
"id": 1,
"name": "韩梅梅",
"sex": "女",
"age": "11",
"cls": "一年级",
"score": "90"
}
]
}
4、所有的css、js、页面元素及数据都已经准备完毕，那么该如何生成表格呢？请看下面代码及注释，部分模块的显示效果已经在文章开头的图片中显示出来，请看官对号入座。
function createTab() {
$('#searchResults').bootstrapTable('destroy').bootstrapTable({
url: 'json/clientJson.json',
/*data : data,*/
toolbar: '#toolbar', //工具按钮用哪个容器
method: 'get', //请求方式
striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存
toolbarAlign: "right", //工具栏对齐方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页
search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
uniqueId: "id",
pageNumber: 1, //初始化加载第一页
pageSize: 1, //每页的记录行数
pageList: [1, 2, 3], //可供选择的每页的行数
pagination: true, // 是否分页
sortable: true, // 是否启用排序
sortOrder: "asc", //排序方式
showColumns: true, //是否显示列选择按钮
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
// height: 500, //行高
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
queryParamsType: '',//设置请求参数格式
queryParams: function queryParams(params) { //设自定义查询参数
/*请求远程数据时，您可以通过修改queryParams来发送其他参数。
如果queryParamsType = 'limit'，params对象包含：limit，offset，search，sort，order。
否则，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
返回false停止请求。
默认： function(params) { return params }*/
return params;
},
columns: [
{
title: "全选",
field: "select",
checkbox: true,
width: 20, //宽度
align: "center", //水平
valign: "middle" //垂直
},
{
field: 'no',
title: '序号',
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
}
,
{
field: 'name',
title: '名字',
align: 'center',
valign: 'middle'
},
{
field: 'sex',
title: '性别',
align: 'center',
valign: 'middle'
},
{
field: 'age',
title: '年龄',
align: 'center',
valign: 'middle'
},
{
field: 'cls',
title: '年级',
align: 'center',
valign: 'middle',
},
{
field: 'score',
title: '分数',
align: 'center',
valign: 'middle',
},
{
field: 'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
]
});
}
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = row.id;
var result = "";
result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
return result;
}
4、ok，现在表格已经展示出来了，过程很简单，但是我刚开始做的时候碰见一个问题： Syntax error, unrecognized expression，如下图所示。wfk？捣鼓半天终于发现，是jquery的版本问题，1.9的版本显然不好使，于是换成2.1的版本，终于大功告成。
5、最后，双手送上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格及下载</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<!--<script src="js/jquery-2.1.4.min.js"></script>-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="container text-center">
<button name='createTab' id='creatTab' type="button"
class="btn btn-primary" onclick="createTab()">生成表格
</button>
</div>
<div class="container">
<!--存放工具栏-->
<div id="toolbar"></div>
<!--存放生成的表格-->
<table id="searchResults" class="table table-hover">
</table>
</div>
</body>
<script>
function createTab() {
$('#searchResults').bootstrapTable('destroy').bootstrapTable({
url: 'json/clientJson.json',
/*data : data,*/ toolbar: '#toolbar', //工具按钮用哪个容器
method: 'get', //请求方式（*）
striped: true, //是否显示行间隔色
// cache: false, //是否使用缓存
toolbarAlign: "right", //工具栏对齐方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
uniqueId: "id",
pageNumber: 1, //初始化加载第一页
pageSize: 1, //每页的记录行数
pageList: [1, 2, 3], //可供选择的每页的行数
pagination: true, // 是否分页
sortable: true, // 是否启用排序
sortOrder: "asc", //排序方式
showColumns: true, //是否显示列选择按钮
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
// height: 500, //行高
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
queryParamsType: '',//设置请求参数格式
queryParams: function queryParams(params) { //设自定义查询参数
/*请求远程数据时，您可以通过修改queryParams来发送其他参数。
如果queryParamsType = 'limit'，params对象包含：limit，offset，search，sort，order。
否则，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
返回false停止请求。
默认： function(params) { return params }*/
return params;
},
columns: [
{
title: "全选",
field: "select",
checkbox: true,
width: 20, //宽度
align: "center", //水平
valign: "middle" //垂直
},
{
field: 'no',
title: '序号',
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
}
,
{
field: 'name',
title: '名字',
align: 'center',
valign: 'middle'
},
{
field: 'sex',
title: '性别',
align: 'center',
valign: 'middle'
},
{
field: 'age',
title: '年龄',
align: 'center',
valign: 'middle'
},
{
field: 'cls',
title: '年级',
align: 'center',
valign: 'middle',
},
{
field: 'score',
title: '分数',
align: 'center',
valign: 'middle',
},
{
field: 'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
]
}); } //操作栏的格式化
function actionFormatter(value, row, index) {
var id = row.id;
var result = "";
result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
return result;
}
</script>
</html>
-------------------------------------------------------------------------------------------------
QQ群：871934478
版权所有，转载请注明源地址
-------------------------------------------------------------------------------------------------