分页功能的设计灵感

不管直接上代码

逻辑：剩余的是否大于0

public CommentResponse GetCommentByPage(PageInfo page)
{

    var result = new CommentResponse();
//通过定义了两个属性在CommentResponse下的两个属性（result.comments和result，HasNextPage）
    var currentUser = _httpContextAccessor.HttpContext.User;
    var usermail = currentUser.Claims.FirstOrDefault(x => x.Type == ClaimTypes.Email)?.Value;

    var sd = (page.currentPage - 1) * page.commentsPerPage;
    //查询到对应的书然后排序
    var commentofBook = _context.BookComments.Where(comment => comment.Bookid == page.BookId.ToString()).OrderBy(x=>x.Datetime);
    var commentofromDb = commentofBook.Skip(sd).Take(page.commentsPerPage);

    //判断逻辑
    result.HasNextPage = sd +page.commentsPerPage < commentofBook.Count();
    //肯定行啊
    var comments = new List<CommentInfo>();
//这里定义了另外一个类CommentInfo的类，具有如下属性，通过foreach遍历的方式将数据库当中的数据都存放到comment（comment是commentInfo类型的）里面
    foreach(var x in commentofromDb)
    {
        var comment = new CommentInfo()
//CommentInfo是另一个类，其实就是List<commenInfo>的数据类型，数据结构
        {
            BookId = x.Bookid,
            Content = x.Content,
            Created = x.Datetime,
            Id = x.Id,
            Username = x.Author,
            CanBeDeleted = usermail == x.Authorid
//这里面进行判断是对我表中的Authorid和当前用户名进行匹配
        };

        comments.Add(comment);
    }
    result.Comments = comments;//添加result当中

    return result;
}


namespace BooksManagement.Server.Models
{
    public class CommentResponse
    {
        public List<CommentInfo> Comments { get; set; }
        public bool HasNextPage { get; set;}
    }

    public class CommentInfo
    {
        public Guid Id { get; set; }
        public string Content { get; set; }
        public string BookId { get; set; }
        public string Username { get; set; }
        public DateTimeOffset Created { get; set; }
        public bool CanBeDeleted { get; set; }
    }
}

这里是用C#写的Api

下面是前台逻辑，主要是两个按钮，一个上一页，一个下一页，上一页就判断是不是第一页就欧克,是第一页那肯定要给一个true  disable显示灰色对吧，然后下一页的逻辑就是点击会触发Api

到最后一的时候我们可以知道最后一页的下一页没有数据了那么好，那肯定就是给个true不显示了呗

  const BookCommentPage = () => {
  const [comment, setComment] = useState("");
  const [comments, setComments] = useState([]);
  // const [commentsPerPage] = useState(5); // 每页显示的评论数量
  const [pagination, setPagination] = useState({
    BookId: "",
    currentPage: 1,
    commentsPerPage: 10,
  });

  const [bookId, setBookId] = useState("");
  const [book, setBook] = useState({});

  const [commentResp, setCommentResp] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const location = useLocation();

  const fetchComments = async (body) => {
    try {
      const commentsData = await fetchCommentsFromBackend(
        "/api/Content/GetCommentByPage",
        body
      );
      if (commentsData) {
        setCommentResp(commentsData);

        console.log(commentsData)
        setComments(commentsData.comments);
        console.log("宫" + commentsData);
      }
    } catch (error) {
      console.log("无法获取评论");
    }
  };

  useEffect(() => {
    const id = location.pathname.substring(
      location.pathname.lastIndexOf("/") + 1
    );
    if (id) {
      setBookId(id);
      getBookInfo(id);
      const initBody = {
        BookId: id,
        currentPage: currentPage,
        commentsPerPage: 10,
      };
      fetchComments(initBody);
    }
  }, []);


  
  const getPageComment = (nextPage) => {
    const initBody = {
      BookId: bookId,
      currentPage: nextPage ? currentPage + 1 : currentPage - 1,
      commentsPerPage: 10,
    };

    setCurrentPage(initBody.currentPage);
    fetchComments(initBody);
  };






 <Button disabled={currentPage == 1} onClick={() => getPageComment(false)}>
        上一页
      </Button>

      <Button
        disabled={!commentResp?.hasNextPage}
        style={{ marginLeft: "20px" }}
        onClick={() => getPageComment(true)}
      >
        下一页
      </Button>