如何实现服务器端分页+服务器端使用ngx-datatable进行排序

问题描述：

使用角度组件ngx-datatable从Swilane可以使用server-side paging和server-side sorting。如何实现服务器端分页+服务器端使用ngx-datatable进行排序

两者都有文档记录，但是不清楚如何将它们结合起来并使用服务器端分页+同时排序。

从文档，分页会自动调用回调当用户改变页面：

setPage(pageInfo) { 
    this.page.pageNumber = pageInfo.offset; 
    this.serverResultsService.getResults(this.page).subscribe(pagedData => { 
    this.page = pagedData.page; 
    this.rows = pagedData.data; 
});

和情况与此相同排序：

onSort(event) { 
    // event was triggered, start sort sequence 
    console.log('Sort Event', event); 
    this.loading = true; 
    // emulate a server request with a timeout 
    setTimeout(() => { 
     const rows = [...this.rows]; 
     // this is only for demo purposes, normally 
     // your server would return the result for 
     // you and you would just set the rows prop 
     const sort = event.sorts[0]; 
     rows.sort((a, b) => { 
     return a[sort.prop].localeCompare(b[sort.prop]) * (sort.dir === 'desc' ? -1 : 1); 
     }); 

     this.rows = rows; 
     this.loading = false; 
    }, 1000); 
    }

，但如何将它们结合起来？

答

我弄清楚，最好的方式来处理这两个服务器端分页和服务器端排序包括：具有page对象保持所有的分页和排序信息（如顺序栏

，订单方向，页码，页面大小......）将被绑定到表
具有单一功能reloadTable()它调用API以获取数据使用存储在page对象中的数据作为参数，自动重新绘制表格
具有包含在page相对于分页一个pageCallback其中仅更新数据，然后调用具有sortCallback其中仅reloadTable()
更新包含在page相对于数据排序然后致电reloadTable()

示例：

import { Component, OnInit } from '@angular/core'; 
import { HttpClient, HttpParams } from '@angular/common/http'; 

@Component({ 
    selector: 'app-my-component', 
    template: ` 
    <ngx-datatable 
     class="bootstrap table table-striped" 
     [rows]="rows" 
     [columns]="columns" 
     [columnMode]="'force'" 
     [headerHeight]="50" 
     [footerHeight]="50" 
     [rowHeight]="'auto'" 
     [externalPaging]="true" 
     [externalSorting]="true" 
     [count]="page.count" 
     [offset]="page.offset" 
     [limit]="page.limit" 
     [sortType]="'single'" 
     (page)="pageCallback($event)" 
     (sort)="sortCallback($event)" 
    ></ngx-datatable> 
    ` 
}) 
export class MyComponent implements OnInit { 
    page = { 
    limit: 10, 
    count: 0, 
    offset: 0, 
    orderBy: 'myColumn1', 
    orderDir: 'desc' 
    }; 

    rows: Object[]; 

    columns = [ 
    { name: 'myColumn1' }, 
    { name: 'myColumn2' }, 
    { name: 'myColumn3' }, 
    ]; 

    constructor(private httpClient: HttpClient) { } 

    ngOnInit() { 
    this.pageCallback({ offset: 0 }); 
    } 

    /** 
    * Called whenever the user changes page 
    * 
    * check: https://swimlane.gitbooks.io/ngx-datatable/content/api/table/outputs.html 
    */ 
    pageCallback(pageInfo: { count?: number, pageSize?: number, limit?: number, offset?: number }) { 
    this.page.offset = pageInfo.offset; 
    this.reloadTable(); 
    } 

    /** 
    * Called whenever the user changes the sort order 
    * 
    * check: https://swimlane.gitbooks.io/ngx-datatable/content/api/table/outputs.html 
    */ 
    sortCallback(sortInfo: { sorts: { dir: string, prop: string }[], column: {}, prevValue: string, newValue: string }) { 
    // there will always be one "sort" object if "sortType" is set to "single" 
    this.page.orderDir = sortInfo.sorts[0].dir; 
    this.page.orderBy = sortInfo.sorts[0].prop; 
    this.reloadTable(); 
    } 

    /** 
    * You will render the table once at the beginning in ngOnInit() 
    * and then every time the page OR the sort order are changed 
    */ 
    reloadTable() { 

    // NOTE: those params key values depends on your API! 
    const params = new HttpParams() 
     .set('orderColumn', `${this.page.orderBy}`) 
     .set('orderDir', `${this.page.orderDir}`) 
     .set('pageNumber', `${this.page.offset}`) 
     .set('pageSize', `${this.page.limit}`); 

    this.httpClient.get(`http://www.your-api.com/path/resource`, { params }) 
     .subscribe((data) => { 

     // NOTE: the format of the returned data depends on your API! 
     this.page.count = data.count; 
     this.rows = data.rows; 
     }); 
    } 
}

如何实现服务器端分页+服务器端使用ngx-datatable进行排序

相关推荐