基本版本：3.3.7
1、引入基本依赖
bootstrap-table.min.css、bootstrap-table.min.js、bootstrap-table-zh-CN.min.js、jquery-3.2.1.min.js 等，具体依赖可以直接下载到项目中，也可以使用完整的url 引入。
2、页面组件使用
<table id="tableTest" class="table table-bordered table-striped table_list" data-toolbar="#toolbar"style="word-break: break-all; word-wrap: break-word;"></table>
<button type="button" class="btn btn-default queryButton">搜索</button>
3、Javascript 使用
$(document).ready(function() {
$('#tableTest').bootstrapTable(
url : "yoururl",//后台url
toolbar : '#toolbar',
columns : [//显示的表格列
{
field : 'name',
title : '标题',
sortable : true,
align : 'center',
},{
field : 'desc',
title : '概要描述',
sortable : true,
align : 'center',
},{
field : 'id',
title : '操作',
align : 'center',
width:100,
formatter : function(value,row, index) {
return "<a href='#' onclick=\"showInfo('"+row.id+"','"+row.name+"','"+row.desc+"','"+value+"')\">查看详情</a>";
}
}
],
pagination : true,//分页
sidePagination : 'server',
pageNumber : 1,
pageSize : 10,
pageList : [ 5, 10, 20, 50 ],
smartDisplay : false,// 控制左右分页
showRefresh : true,//显示刷新按钮
cache : false,//缓存设置
showColumns : false,
sortOrder : "asc",
sortName : 'name',
queryParamsType : '',
clickToSelect : false,
silent : true,
onlyInfoPagination : false,
onLoadSuccess : function() {
},
responseHandler : function(res) {
if (res.total != 0) {
var row = res.rows;
return {
"rows" : row,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
},
queryParams : function(params) {
var content = $("#content").val();
var data = {
pageSize : params.pageSize,
pageNo : params.pageNumber,//页面
sort : params.sortName,
order : params.sortOrder,
name:content,
}
return data;
}
);
$(document).on('click', ".queryButton", function() {
$('#tableTest').bootstrapTable('refresh');
});
})
备注：需要对各种属性熟悉才能使用好Bootstrap,后续属性特性再增加
4、其他使用
$('#tableTest').bootstrapTable('refresh');//刷新表格
