首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用之前必须引用 jquery 和bootstrap的相关js，css文件。
接着说，的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。
1、引入js、css
2、table数据填充
bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据
第二种方式较第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
/ var oButtonInit = new ButtonInit();
oButtonInit.Init(); /
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tradeList').bootstrapTable({
url: '/VenderManager/TradeList',//请求后台的URL（）
method: 'post',//请求方式（）
toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否显示行间隔色
cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
pagination: true,//是否显示分页（）
sortable: false,//是否启用排序
sortOrder: "asc",//排序方式
queryParams: oTableInit.queryParams,//传递参数（）
sidePagination: "server",//分页方式：client客户端分页，server服务端分页（）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize: 50,//每页的记录行数（）
pageList: [10,25,50,100],//可供选择的每页的行数（）
strictSearch: true,clickToSelect: true,//是否启用点击选中行
height: 460,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id",//每一行的唯一标识，一般为主键列
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
columns: [{
field: 'id',title: '序号'
},{
field: 'liushuiid',title: '交易编号'
},{
field: 'orderid',title: '订单号'
},{
field: 'receivetime',title: '交易时间'
},{
field: 'price',title: '金额'
},{
field: 'coin_credit',title: '投入硬币'
},{
field: 'bill_credit',title: '投入纸币'
},{
field: 'changes',title: '找零'
},{
field: 'tradetype',title: '交易类型'
},{
field: 'goodmachineid',title: '货机号'
},{
field: 'inneridname',title: '货道号'
},{
field: 'goodsName',title: '商品名称'
},{
field: 'changestatus',title: '支付'
},{
field: 'sendstatus',title: '出货'
},]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit,//页面大小
offset: params.offset,//页码
sdate: $("#stratTime").val(),edate: $("#endTime").val(),sellerid: $("#sellerid").val(),orderid: $("#orderid").val(),CardNumber: $("#CardNumber").val(),maxrows: params.limit,pageindex:params.pageNumber,portid: $("#portid").val(),tradetype:$('input:radio[name="tradetype"]:checked').val(),success:$('input:radio[name="success"]:checked').val(),};
return temp;
};
return oTableInit;
};
field字段必须与服务器端返回的字段对应才会显示出数据。
a、servlet获取数据
b、springMvc Controller里面对应的方法获取数据