项目中使用到了bootstrapTable , 根据条件查询数据,重新加载列表,有几种方式。
直接看代码:
$(function() {
load();
});
function load() {
$('#dataTable').bootstrapTable(
{
method : 'post',
url : "/user/list",
pageSize : 10,
pageNumber : 1,
sidePagination : "server",
queryParams : function(params) {
return {
limit: params.limit,
offset: params.offset,
userName: $.trim( $('#userName').val() ) ,
age: $.trim( $('#age').val() ) ,
}
},
columns : [
{
checkbox : true
},
{
field : 'userName',
title : '名称' ,
},
{
field : 'age',
title : '年龄' ,
},
{
field : 'createDate',
title : '创建时间' ,
},
{
title : '操作',
field : 'id',
formatter : function(value, row, index) {
return '' ;
}
}
]
});
}
// 方法1: 刷新(重新加载数据),显示第1页
function reLoad() {
$('#dataTable').bootstrapTable('destroy');
load();
}
// 方法2: 刷新、重新加载指定页码的数据
function reLoad2() {
//var pageNumber = $("#dataTable").bootstrapTable("getOptions").pageNumber; // 获取当前页码
$("#dataTable").bootstrapTable('refreshOptions',{pageNumber:1}); // pageNumber的值 可以指定页码,如果是1,则是第1页,也可以获取当前页码,每次跳转的当前页面,也就是刷新。
}
// 方法3: 跳转到第n页。当列表为空时,此方法会失效。
function reLoad3() {
n=1; // n 表示第n页。比如n=1 ,表示第1页
$("#dataTable").bootstrapTable('selectPage', n);
}
说明:
方法1、方法2 是将 table销毁销毁,再生成新的列表;由于 table销毁,使得每次页面会滚动最上面。
方法3 是跳转到第n页 。但是当查询列表数据为空时,方法失效。