分页查询有数据无数据源问题
使用前端查询有数据但无数据源问题
问题详情
表格有自带的分页功能,后台分页主要是通过传{limit:10,page:1表示当前页数为第1页,每页显示10条数据,两个参数来控制分页的分页查询。假设当前有三十条数据,则初始化表格时,显示3页,总数30,页数为1,数据源为1-10条数据。当我们添加查询条件时,假设我通过模糊查询“汪” 能在30条数据中查询到10条数据,当前页数为第一页,查询的数据进行分页{limit:10,page:1}
10条数据取1-15条之内的,数据源也就是10条数据。此时我们把页数切换到第二页时,再通过相同的查询条件去查询,查询数据还是为10条,分页传的{limit:10,page:2},10条数据取16-30之间的数据,然而总数据只有10条,行号在16-30之间无数据,虽然可以看到数据的总数为10,但是没有数据源,前台显示无数据,无数据也就无法初始化下方的分页栏。为了保证能够查询数据,在点击查询按钮时,自动将页数指定为第一页。
继续你的创作。
具体问题演示
代码演示
//查询操作按钮点击事件
$("#searchBtn").click(function () {
//页码页号设置在后端,有具体对象
//page=1,limlt=10
//以下是提交具体参数
let name = $("#name").val();
let phone = $("#phone").val();
let address = $("#address").val();
tabIns.reload({
where: {
"name": name,
"phone": phone,
"address": address
}
})
});
这样就出现上述问题,当点击第二页,然后查询时
{page=1,limit=10,name,phone,address}就变成
{page=2,limit=10,name,phone,address}
解决办法
//按钮查询
$("#searchBtn").click(function () {
let name = $("#name").val();
let phone = $("#phone").val();
let address = $("#address").val();
let page=1;//强制把page改为1
tabIns.reload({
where: {
"page":page,//参数引用
"name": name,
"phone": phone,
"address": address
}
})
});
这样每次查询都是传递:
{page=1,limit=10,name,phone,address}
这样就解决啦问题!!
以上内容纯属参考,部分引用,如有侵权,请联系422117362@qq.com.