版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32258777/article/details/78532606
1.bootstrap官网下载对应的js和css并引用
2.在jsp等前端页面定义一个表格：
<table id="table"></table>
3.在js中设置好bootstrap参数
var tableInitNew = {
Init: function () {
var url = '/category/refinement/list';
$('#table').bootstrapTable({//
idField: 'id', //标识哪个字段为id主键
url: url, //数据来源
method:'post', //服务器数据的请求方式 'get' or 'post'
dataType:'json',
dataField: "data", //返回每行数据的key
totalField: 'total', //返回数据总条数的key 这一句怎么改都不起作用 可能bootstrap 规定返回的条数key为total
contentType: "application/json",
striped: true,//使表格带有条纹
pagination:true, //是否显示分页
pageSize:10, //当前每页显示条数
pageList:[10, 20, 50, 100], //当前可选分页数
queryParams : queryParamsNew, //请求参数
responseHandler:responseHandlerNew, //请求数据成功后，渲染表格前的方法
sidePagination: "server",
clickToSelect:true, //是否点击行选中该行
exportDataType: "basic", //basic', 'all', 'selected'.
// toolbar:"#toolbar", //设置左上方工具栏
columns: [{ //设置列
field: 'state',
checkbox: true,
},{
field: 'Number',
title: '序号',
formatter: function (value, row, index) {
return index+1;
}
},{
field: 'cname', //列绑定数据
title: '类目名称', //列名称
sortable:true, //是否开启排序
halign:"center", //列头位置：left,center,right
align:"center", //该列内容显示位置：left,center,right
},{
field: 'categoryImageUrl',
title: '类目图片',
halign:"center",
align:"center",
formatter: function (value, row, index) {
return '<img height="50px" width="50px" src="'+value+'">';
}
}, {
field: 'categoryImageUrl',
title: '类目url',
halign:"center",
align:"center",
/*formatter: function (value, row, index) {
return value + '<p onclick="copyText('+value+')" >复制</p>';
}*/
}, {
field: 'hotSortId',
title: '排序',
halign:"center",
align:"center",
formatter: function (value, row, index) {
return '<p style="cursor:pointer" onclick="upTop('+value+')" >置顶</p><p style="cursor:pointer" onclick="upRemove('+value+')">上移</p><p style="cursor:pointer" onclick="downRemove('+value+')" >下移</p><p style="cursor:pointer" onclick="downTop('+value+')" >置底</p>';
}
}, {
field: 'lastUpdatedBy',
title: '修改人',
halign:"center",
align:"center",
// titleTooltip:"<span title='搜索结果数为每天根据关键词搜索出来的产品结果数'/>",
}, {
field: 'lastUpdatedOn',
title: '修改时间',
halign:"center",
align:"center",
}]
});
},
};
//封装查询参数
function queryParamsNew(params) {
page = this.pageNumber;
size = this.pageSize;
//alert(page)
var param = {
topCategoryId :$("#mCategoryId").val().replace(/,/g, ''),
page : page,
size : size,
topCategoryId :topCategoryId
}
return param;
}
//请求成功方法
function responseHandlerNew(result){
if(result == null || result == undefined){
return {
data: [],
total: 0
}
}
//如果没有错误则返回数据，渲染表格
return {
total : result.total, //总页数,前面的key必须为"total"
data : result.data //行数据，前面的key要与之前设置的dataField的值一致.
};
};
4.在js中初始化框架
tableInitNew.Init();
5.出现的成品展示为：
6.注意事项：
①/category/refinement/list请求中，应该在后台传入total和data，以便框架分页以及展示
②data中可以为对象或者对象集合，但是对应的列应该在对象中，否则不能匹配成功
③从js到后台请求时，框架会有page和size两个固定的属性，后台要有对应的字段接收，以便其分页
④ $('#table').bootstrapTable("refresh", {url: "/category/refinement/list"});这样刷新会跳转到第一页
$('#table').bootstrapTable("refresh"); 这样刷新会跳转到当前页