bootstrap设计的精美网站推荐 bootstrap源码使用( 二 )

$('#infoList').bootstrapTable({url: '${pageContext.request.contextPath}/xx/xxx', //请求后台的URL（*）method: 'post', //请求方式（*）contentType: 'application/x-www-form-urlencoded',toolbar: '#toolbar', //工具按钮用哪个容器striped: true, //是否显示行间隔色cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true, //是否显示分页（*）sortable: false, //是否启用排序sortOrder: "desc", //排序方式sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）pageNumber: 1, //初始化加载第一页，默认第一页pageSize: 10, //每页的记录行数（*）pageList: [10, 50, 100], //可供选择的每页的行数（*）strictSearch: true,showColumns: false, //是否显示所有的列showRefresh: false, //是否显示刷新按钮minimumCountColumns: 2, //最少允许的列数clickToSelect: true, //是否启用点击选中行//uniqueId: "aac147", //每一行的唯一标识，一般为主键列showToggle: false, //是否显示详细视图和列表视图的切换按钮cardView: false, //是否显示详细视图detailView: false, //是否显示父子表queryParams: queryParams, //所需要的参数queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求columns: myColumns,// 列名这里通过别处方法加载onClickRow: function (row, obj) {//点击事件...},onLoadSuccess: function (data) {...}});function queryParams(params) {//配置参数var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的pageSize: params.limit,//页面大小pageNumber: (params.offset / params.limit) + 1,//页码};return temp;}1234567891011121314151617181920212223242526272829303132333435363738394041想要实现的效果：此时我需要在表格上方，加上文本输入框，并添加查询按钮，点击查询按钮，把输入的条件加入到表格参数 queryParams 中，通过数据库的查询返回数据，并更改表格结构和内容，做到重新加载的效果。
但是失败了。
解决后加载表格需要在点击查询按钮时，首先调用表格销毁方法
$('#infoList').bootstrapTable('destroy');接着再重新加载新的表格：
$('#infoList').bootstrapTable({url: '${pageContext.request.contextPath}/xx/xxx2', //请求后台的URL（*）method: 'post', //请求方式（*）contentType: 'application/x-www-form-urlencoded',toolbar: '#toolbar', //工具按钮用哪个容器striped: true, //是否显示行间隔色cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true, //是否显示分页（*）sortable: false, //是否启用排序sortOrder: "desc", //排序方式sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）pageNumber: 1, //初始化加载第一页，默认第一页pageSize: 10, //每页的记录行数（*）pageList: [10, 50 ,100], //可供选择的每页的行数（*）strictSearch: true,showColumns: false, //是否显示所有的列showRefresh: false, //是否显示刷新按钮minimumCountColumns: 2, //最少允许的列数clickToSelect: true, //是否启用点击选中行showToggle: false, //是否显示详细视图和列表视图的切换按钮cardView: false, //是否显示详细视图detailView: false, //是否显示父子表queryParams: function(params){return {pageSize: params.limit,//页面大小pageNumber: (params.offset / params.limit) + 1,//页码keyword: $("#search_json").val(),// 关键词};},queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求columns: myColumns,onClickRow: function (row, obj) {...},onLoadSuccess: function (data) {...}});function queryParams2(params) {// 配置参数有查询条件用var keyword = $("#search_json").val();var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的pageSize: params.limit,//页面大小pageNumber: (params.offset / params.limit) + 1,//页码keyword: keyword// 查询关键词};return temp;}注意：具体实现代码太过庞大，所以以上代码并不完整只是提供思路。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：