使用ngx-pagination的服务器端分页

问题描述 投票:0回答:3

我让ngx-pagination模块处理GET中的所有列表,但是我也希望该分页也可以在服务器端工作,但是我不确定如何进一步实现它。我正在查看有关ngx-pagination的文档,但有些困惑。这就是我所拥有的。

html

<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
    <div class="loading">
        <!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->

        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">


            <p class="loadingTitle">Loading...</p>
        </ngx-spinner>

    </div>

    <div class="spacing"></div>
    <div class="container">
        <div class="row no-gutters"
            *ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
            <div class="class col-md-7"></div>

        </div>

        <!-- /|slice:0:show -->
        <!--; let i = index-->
        <div class="row"
            *ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
            <div class="col-md-12 col-centered">

                <div class="listingCard" [@simpleFadeAnimation]="'in'">

                    <div class=container>

                        <div class="row">
                            <div class="col-md-3">

                            </div>
                            <div class="col-md-6">
                                <div id="title">{{auction.title}}</div>
                            </div>

                        </div>

                    </div>



                </div>
            </div>

        </div>

    </div>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
</head>

<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
    <div class="loading">
        <!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->
        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">

            <p class="loadingTitle">Loading...</p>
        </ngx-spinner>
    </div>
    <div class="spacing"></div>
    <div class="container">
        <div class="row no-gutters"
            *ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
            <div class="class col-md-7"></div>
        </div>
        <!-- /|slice:0:show -->
        <!--; let i = index-->
        <div class="row"
            *ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
            <div class="col-md-12 col-centered">
                <div class="listingCard" [@simpleFadeAnimation]="'in'">
                    <div class=container>
                        <div class="row">
                            <div class="col-md-3">
                            </div>
                            <div class="col-md-6">
                                <div id="title">{{listing.title}}</div>
                            </div>
                        </div>
                    </div>
                    =
                </div>
            </div>
        </div>
    </div>
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</body>

component

 p: number = 1;

ngOnInit(){
    this.submitListingService.getListings(this.postsPerPage, this.currentPage);
    this.listingService
      .getPostUpdateListener()
      .pipe(takeUntil(this.destroy))
      .subscribe((postData: { listing: Listing[]; postCount: number }) => {
        this.isLoading = false;
        this.totalPosts = postData.postCount;
        this.posts = postData.listing;
        this.filteredPosts = postData.listing;
      });
}

角度服务

getListings(postsPerPage: number, currentPage: number) {
    let listings = "Get Listings";
    const params = new HttpParams().set("listings", listings);
    const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
    this.http
      .get<{ message: string; posts: any; maxPosts: number }>(
        "http://localhost:3000/api/listings" + queryParams,
        { params }
      )
      .pipe(
        map(postData => {
          return {
            posts: postData.posts.map(post => {
              return {
               title: post.title,                   
                id: post._id
              };
            }),
            maxPosts: postData.maxPosts
          };
        })
      )
      .pipe(takeUntil(this.destroy))
      .subscribe(transformedPostData => {
        this.posts = transformedPostData.posts;
        this.postsUpdated.next({
          listing: [...this.posts],
          postCount: transformedPostData.maxPosts
        });
      });
  }

app.js

app.get("/api/listings", (req, res, next) => {
  Post.find({ auctionEndDateTime: { $gte: Date.now() } })
      .populate("creator", "username")
      .then(documents => {
        req.params.Id = mongoose.Types.ObjectId(req.params.Id);
        res.status(200).json({
          message: "Auction listings retrieved successfully!",
          posts: documents
        });
      });
});
node.js angular mongodb express mongoose
3个回答
0
投票

您将在服务器端需要两个值,第一个是页面,即要显示的页面号,第二个是限制,即要在页面上显示多少个结果。然后只需使用:

.skip(limit * (page - 1)).limit(limit)

[第一个运算符将跳过不想要的结果,例如:如果页面为2,限制为20,则在第一个操作中将跳过前20个结果,然后在第二个操作中,我们将结果限制为20个结果,因此您将获得21个文档到40,这是理想的结果。


0
投票

这里是另一种方式。这可能更适合您的情况。

  Post.find({ auctionEndDateTime: { $gte: Date.now() } })
      .populate("creator", "username")
      .then(documents => {
          req.params.Id = mongoose.Types.ObjectId(req.params.Id);

          let per_page = req.query.pagesize;
          let page = req.query.page || 1;
          let offset = (page - 1) * per_page;
        res.status(200).json({
          message: "Auction listings retrieved successfully!",
          posts: documents.slice(offset).slice(0,
                per_page)

        });
      });

0
投票

您的服务文件

getListings(postsPerPage: number, currentPage: number) {
    // let listings = "Get Listings";
    // const params = new HttpParams().set("listings", listings);
    // const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
    const queryParams = postsPerPage+"/"+currentPage; //change this .
    this.http
    .get<{ message: string; posts: any; maxPosts: number }>(
        "http://localhost:3000/api/listings/" + queryParams
        )
    .pipe(
        map(postData => {
            return {
                posts: postData.posts.map(post => {
                    return {
                        title: post.title,                   
                        id: post._id
                    };
                }),
                maxPosts: postData.maxPosts
            };
        })
        )
    .pipe(takeUntil(this.destroy))
    .subscribe(transformedPostData => {
        this.posts = transformedPostData.posts;
        this.postsUpdated.next({
            listing: [...this.posts],
            postCount: transformedPostData.maxPosts
        });
    });
}

由于您正在发送参数,因此您需要按以下服务器代码中所述更改API的URL,

您的服务器代码将如下,

app.get("/api/listings/:postPerPage/:currentPage", (req, res, next) => {
    let postPerPage = req.params.postPerPage;
    let currentPage = req.params.currentPage;
    Post.find({ auctionEndDateTime: { $gte: Date.now() } })
    .populate("creator username")
    .skip(postPerPage * currentPage)
    .limit(postPerPage)
    .then(documents => {
        req.params.Id = mongoose.Types.ObjectId(req.params.Id);
        res.status(200).json({
            message: "Auction listings retrieved successfully!",
            posts: documents
        });
    });
});

从以上代码中,您将获得等于postPerPage的帖子。希望这是您想要的。谢谢

© www.soinside.com 2019 - 2024. All rights reserved.