(serverseitig) So rufen Sie Daten von MarkLogic ab und paginieren einige nach dem anderen

Question

Mein Ziel ist es, jedes Mal, wenn ich auf die Schaltfläche "Weiter" klicke, die nächsten 10 Elemente aus db abzurufen.

Also anstatt 100 Datensätze in einer Aufnahme von db, die wahrscheinlich das System verzögern, ich möchte nur 10 auf einmal abrufen.

Im Folgenden sind ein Ausschnitt von dem, was ich getan habe, nicht sicher, was sonst fehlt ich ...

Bei resource.java

@Autowired 
    protected QueryManager queryManager; 

    @RequestMapping(value = "/retrieveObjects/{page}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE) 
    public ResponseEntity<Object[]> retrieveObjects(@PathVariable("page") String page){ 
     int pageNum = Integer.valueOf(page); 
     int start = PAGE_SIZE_TEN * (pageNum - 1) + 1; 
     SearchHandle resultsHandle = new SearchHandle(); 
     queryDef.setDirectory(DIRECTORY); 
     queryManager.setPageLength(PAGE_SIZE_TEN); 
     queryManager.search(queryDef, resultsHandle, start); 

     return new ResponseEntity<Object[]>(handleSearch(resultsHandle), HttpStatus.OK); 
    } 

Bei component.ts

this.restclient.getjson('/api/retrieveObjects/'+page) 
    .subscribe(objects => { 
     for(let i=0; i<objects .length; i++){ 
     this.objects.push(objects[i]); 
     } 
    }); 

Bei component.html

<div *ngFor="let object of objects | paginate: { itemsPerPage: 10, currentPage: p }"> 
<div (click)="gotoObject(object.id)"> 
    {{object.id}} 
</div> 
</div> 
<pagination-controls class="pagination" (pageChange)="p = $event;getPage($event)"></pagination-controls> 

Ich habe 100 Datensätze.

Allerdings zeigt das Ergebnis nur 1 Seite meiner ersten 10 Datensätze, die "nächste" Schaltfläche ist deaktiviert.

Das erwartete Ergebnis sollte 1 Seite der ersten 10 Datensätze zeigen, klicken auf "nächste" Schaltfläche ruft die API/retrievalObjects /, um die nächsten 10 Datensätze abzurufen.

Answer 1

Ich glaube, Sie die serverseitige Paginierung implementieren möchten:

Dafür haben Sie einen zusätzlichen Parameter zu übergeben totalItems

{ 
    "count": 100, // no of total records 
    "data": [ // chunk of data (in your case chunk of 10 records) 
    { /* item 1 */ }, 
    { /* item 2 */ }, 
    { /* item 3 */ }, 
    { /* ... */ }, 
    { /* item 10 */ } 
    ] 
} 

<div *ngFor="let object of objects.data | paginate: { itemsPerPage: 10, currentPage: p, totalItems: objects.count }"> 

Für mehr, bitte lesen: http://michaelbromley.github.io/ngx-pagination/#/