Ionic 4+分页的rest api搜索过滤器,具有无限滚动



我使用的是离子5.4.5。RestApi是用node和express js创建的。当我想搜索时,应用程序只在第一页上查找数据。我想让应用程序搜索所有数据。我该怎么做?

我们的api已分页

app.get("/units", (req, res) => {
let page = parseInt(req.query.page)
let limit = parseInt(req.query.limit)
if(!page && !limit){
page = 1;
limit = 5;
}
let startIndex = (page -1) * limit
let endIndex = page * limit
let results = {} 
if(endIndex < data.length){
results.next = {
page : page + 1,
limit : limit
}
}
if(startIndex > 0){
results.previous = {
page : page - 1,
limit : limit
}
}
results.results = data.slice(startIndex,endIndex)
res.json(results);
});
app.get("/units/:id", (req, res) => {
const itemId = req.params.id;
const item = data.find(_item => _item.id == itemId);
if (item) {
res.json(item);
} else {
res.json({ message: `item ${itemId} doesn't exist`})
}
});

主页.ts

getItems(ev) {
let val = ev.target.value;
if (val == '') {
this.loadUnit();
return;
}
if (val && val.trim() != '') {
this.unit = this.unit.filter((un,name) => {
return (un.name.toLocaleLowerCase().indexOf(val.toLocaleLowerCase()) > -1);
})
} 
}

我还使用一个服务从API获取数据。

从API返回所有数据,并在应用程序上执行过滤和分页。或者在API中执行过滤和分页(按顺序(。

如果有很多数据行,最后一个选项可能更好,因为:

  • 将所有行发送到应用程序将使用大量数据并花费大量时间,尤其是通过WiFi或移动数据连接
  • 服务器上的处理通常比客户端上的处理快,尤其是在移动设备上

您可能还想返回API的总行数。

最新更新