无限滚动的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",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`})
   }
});

home.page.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获取数据。

liusha7258322 回答:无限滚动的Ionic 4+分页的REST API搜索过滤器

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

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

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

您可能还希望从API返回总行数。

本文链接:https://www.f2er.com/3158657.html

大家都在问