1、导入js与css
<!--导入js的方式有很多,按你们自己的来 我这里是用了thymeleaf模板-->
<link th:href="@{/static/bootstrap/dist/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/static/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
<!-- Jquery-->
<script th:src="@{/static/jquery/jquery.min.js}"></script>
<!-- bootstrap-->
<script th:src="@{/static/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- bootstrap table -->
<script th:src="@{/static/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap-table/bootstrap-table-zh-CN.js}"></script>
2、js代码如下
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
method : 'post',
//get方法使用默认的application/json
contentType : 'application/x-www-form-urlencoded',
url : '', // 路径
queryParams : function(parms){ // 参数
var parm = {
// name : name
}
return parm
},
dataType: 'json', // 返回数据类型
locale:'zh-CN', // 中文支持
showRefresh: false, // 刷新按钮
showColumns: false, // 显示列筛选
//sidePagination: 'server', // 设置在哪里进行分页,可选值为 'client' 或者 'server'
uniqueId : '', // 绑定ID,对每一行指定唯一标识符
cache : false, // 设置为 false,禁用 AJAX 数据缓存, 默认为true
striped : false, // 表格显示条纹,默认为false
pagination : true, // 在表格底部显示分页组件,默认false
paginationLoop : true, // 默认true,启用分页条无限循环的功能
pageList : [ 20, 30, 40, 50 ], // 设置页面可以显示的数据条数
pageSize : 20, // 页面默认数据条数
pageNumber : 1, // 首页页码
search : false, // 启动搜索框
searchOnEnterKey : false, // 默认false,输入自动搜索
showHeader : true, // 默认true
showFooter : false, // 默认false
clickToSelect: false, // 为true时点击行选中复选框
toolbar : '',
//showToggle:true,
columns : [
{ field : 'id', width : 100, align: 'center', title : 'id' },
{ field : 'name', width : 100, align: 'center', title : '名称' },
{ field : 'age', width : 150, align: 'center', title : '年龄' },
{ field : 'six', width : 100, align: 'center', title : '性别' }
],
onLoadSuccess : function(data) {
// 加载成功之后
}
});