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 = '';
var d = '';
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() {
})里。