bootstrap table更新数据，根据查询条件和参数展示列表

最近刚开始接触bootstrap table，感觉比较好用，初始化很方便。

html代码：

<div class="panel panel-default">
<div class="panel-heading">搜索</div>
<div class="panel-body">
<form role="form" id="searchForm" class="form-inline">
<div class="form-group">
<label for="sname1">用户名</label> <input type="text"
class="form-control" id="sname1" name="sname1" placeholder="请输入名称">
</div>
<div class="form-group">
<button type="button" id="searchBtn" class="btn btn-default">开始搜索</button>
</div>
</form>
</div>
</div>
<!--列表展示-->
<div class="table-responsive" id="listDiv">
<table class="table table-striped table-hover" id="studentTable">
</table>
</div>

前面一个div是搜索的表单，显示数据的是一个table，初始化bootstrap table的js网上有很多可以参考，我这里只是用最简单的前端分页，js代码如下：

$(document).ready(function() {
//调用函数，初始化表格
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
var sname11 = $("#sname1").val();
var urlStr = '/StudentInfo/student/listData?sname1=' + sname11;
//console.log(urlStr);
$('#studentTable').bootstrapTable({
url: urlStr,         //请求后台的URL（*）
method: 'get',                      //请求方式（*）
toolbar: '#toolbar',                //工具按钮用哪个容器
striped: true,                      //是否显示行间隔色
cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,                   //是否显示分页（*）
//sortable: false,                     //是否启用排序
//sortOrder: "asc",                   //排序方式
//queryParams: oTableInit.queryParams,//传递参数（*）
queryParams : {
sname1 : 'r',
test:'r'
},
sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,                       //初始化加载第一页，默认第一页
pageSize: 5,                       //每页的记录行数（*）
pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
strictSearch: true,
clickToSelect: true,                //是否启用点击选中行
height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id",                     //每一行的唯一标识，一般为主键列
cardView: false,                    //是否显示详细视图
detailView: false,                   //是否显示父子表
columns: [{
checkbox : true
}, {
field: 'sno',
title: '学号'
}, {
field: 'sname',
title: '姓名'
}, {
field: 'gender',
title: '性别'
}, {
field: 'major',
title: '专业'
},  {
title: '操作',
align: 'center',
formatter:function(value,row,index){
var e = '<button type="button" class="btn btn-primary" onclick="updateFun(\''+ row.id +'\')">修改</button>';
var d = '<button type="button" class="btn btn-danger" onclick="deleteFun(\''+ row.id +'\')">删除</button>';
return e+d;
} }
]
});
};

//得到查询的参数
oTableInit.queryParams2 = function (params) {
var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//limit: params.limit,   //页面大小
//offset: params.offset,  //页码
sname1 : "r",
};
return temp;
};
return oTableInit;
};

点击搜索按钮后，一开始采用再次调用init()方法，发现参数无法传递过去，列表也没有更新，后来看了网上一篇资料发现不能在调用该Init()方法，正确写法应该为：

$("#searchBtn").click(function() {
var sname1 = $("#sname1").val();
$.ajax({
type: "post",
url: "/StudentInfo/student/listData",
data: {sname1 : sname1},
dataType:"json",
success : function(json) {
$("#studentTable").bootstrapTable('load', json);//主要是要这种写法
}
});

});

然后问题解决，当然上面这个方法也应该放在$(document).ready(function() {

})里。