如何最好地将分页添加到 Reactjs 中的搜索结果查询？

Question

我有一个 MERN 堆栈应用程序，我在 Nodejs 中编写了搜索查询和分页，我在 Reactjs 中实现了分页部分，并且也想实现搜索查询。 它正在工作，但没有分页。 我想如果搜索结果超过 20 个结果，我只想让它变成两页。 我可以每页做 12 个搜索结果。 有没有办法做到这一点？ 我可以在单个 URL 中同时添加搜索和分页查询吗？ 这是我的nodejs代码：

const DEFAULT_PAGE_NUMBER = 1
const DEFAULT_PAGE_LIMIT = 12;


const getPagination =(query) =>{
const page = Math.abs(query.page) || DEFAULT_PAGE_NUMBER;
const limit = Math.abs(query.limit) || DEFAULT_PAGE_LIMIT;

const skip = (page -1) * limit


return {
    skip,
    limit
};

};


const getAllPosts = async (req, res) =>{
      const {skip, limit} = getPagination(req.query);
       const {searches} = req.query;

  if(searches){
       posts = await Post.find({title: {$regex: searches.toString(), "$options": "i"}}).populate('username', 'username').sort({createdAt:-1})
       .skip(skip)
       .limit(limit)  
           
   }
 }

现在，在 Reactjs 中，我为分页查询做了这样的事情：

useEffect(()=>{
 try{
    const response = await axios.get(`/posts/?page=${path}`);
 }catch(err){
 
  }


}, [path]);

这适用于分页，每页显示 12 个帖子。

现在，在 Reactjs 中，我为搜索查询做了这样的事情：

useEffect(()=>{
 try{
    const response = await axios.get(`/posts/?searches=${path}`);
 }catch(err){
 
  }


}, [path])

现在，这行得通。 它根据用户输入的搜索词获取帖子。 问题是结果可能比我在页面中想要的要多。 有没有一种方法可以将我写的分页查询也集成到其中，以便当搜索结果超过 12 时，其他帖子将在下一页上被调用？

Answer 1

我通过在正文中传递搜索参数和查询中的分页来解决这个问题。 这解决了我的问题。 查看示例代码

  const {skip, limit} = getPagination(req.query);//pagination
  const search = req.body.search;//search 
 if(search){
    posts = await Post.find({title: {$regex: search.toString(), "$options": "i"}}).populate('username', 'username').sort({createdAt:-1})
       .skip(skip)
       .limit(limit)  
}
else{
  fetch the entire posts if there is no search parameter.
   }

Answer 2

数据表插件提供了非常好的开箱即用的分页