一.首先需要导入 bootstrap-table.js，bootstrap-table-zh-CN.js，bootstrap-table.css文件 这几个文件的下载链接：http://downlo
一.首先需要导入 bootstrap-table.js，bootstrap-table-zh-CN.js，bootstrap-table.css文件
这几个文件的下载链接：http://download.csdn.net/detail/zhangyabin86/9748534
例如:<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet"/> <script type="text/javascript" src="js/bootstrap-table.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js" charset="UTF-8"></script>
注：bootstrap-table.js文件要先于bootstrap-table-zh-CN.js导入，即放在bootstrap-table-zh-CN.js文件 上方
二.调用js中封装的方法加载到jsp页面中
在jsp中加入table标签即可
<table id="winport-table" class="col-xs-12" data-toolbar="#toolbar" ></table>
function tabliList(){
$('#winport-table').bootstrapTable({
method: 'get',
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
url: "自己的url",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true,
onLoadSuccess:function(data){ //加载成功后的事件
// console.log(data);
},
columns: [{
field: 'winportName',
title: '商铺名称',
align: 'center'
}, {
field: 'winportPrice',
title: '商铺价格',
align: 'center'
}, {
field: 'imgPath',
title: '商铺图片',
align: 'center'
},{
field: 'winportAddress',
title: '商铺地址',
align: 'center'
}, {
field: 'winportArea',
title: '商铺标签',
align: 'center'
},{
field: '',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = "<button >修改</button>“；
return a;
}
}],
pagination:true
});
}
bootstrap-table 参数的详细配置可参考官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
三.服务端接收参数和返回的json格式（ 后台采用的是springMVC的框架）
request.getParameter("pageNumber"); //获取分页的页数
request.getParameter("pageSize"); //获取分页的条数
查询返回的json格式必须包括rows和total ：rows是返回记录的集合，total是返回的总条数[]
如：{ "total": 10, "rows": [
{
"Field1": "11",
"Field2": "aa"
},
{
"Field1": "22",
"Field2": "bb"
}
]
}
