ngx-datatable集成ngx-pagination实现跳转末页功能的问题咨询

问题背景 #

在Angular项目中使用ngx-datatable组件自定义分页功能，期望实现支持跳转到首页、尾页的分页效果，预期效果如下：

原有页脚实现代码如下：

<ngx-datatable-footer>
     <ng-template ngx-datatable-footer-template 
        let-curPage="curPage" 
        let-offset="offset" 
        let-pageSize="pageSize" 
        let-rowCount="rowCount" 
        let-selectedCount="selectedCount">
           <div class="d-flex justify-content-center">
              <pagination-controls 
                  itemsPerPage="pageSize"
                  currentPage="curPage"
                  totalItems="rowCount"
                  directionLinks="true"
                  previousLabel="" 
                  nextLabel="" 
                    (pageChange)="onPage($event)">
              </pagination-controls>
           </div>
         </ng-template>
     </ngx-datatable-footer>

实际实现效果不符合预期，仅展示基础页码和前后切换按钮，无首尾页跳转功能：

问题原因 #

• 未开启ngx-pagination的首尾页按钮配置：pagination-controls组件默认不展示首页、尾页按钮，需要显式添加firstLastButtons属性开启该功能
• 页码计数基准不匹配：ngx-datatable内置的curPage变量从0开始计数，而ngx-pagination的currentPage入参默认从1开始计数，两者数值不一致会导致分页状态联动异常
• 缺少首尾页按钮文本配置：未配置firstLabel、lastLabel属性自定义首尾按钮的显示内容

修复代码 #

将页脚部分代码调整为如下内容即可实现预期效果：

<ngx-datatable-footer>
  <ng-template ngx-datatable-footer-template 
    let-curPage="curPage" 
    let-offset="offset" 
    let-pageSize="pageSize" 
    let-rowCount="rowCount" 
    let-selectedCount="selectedCount">
      <div class="d-flex justify-content-center">
        <pagination-controls 
            itemsPerPage="pageSize"
            [currentPage]="curPage + 1"
            totalItems="rowCount"
            directionLinks="true"
            previousLabel="上一页" 
            nextLabel="下一页"
            firstLastButtons="true"
            firstLabel="首页"
            lastLabel="尾页"
            (pageChange)="onPage($event - 1)">
        </pagination-controls>
      </div>
    </ng-template>
</ngx-datatable-footer>

注意事项 #

• 分页切换事件onPage接收的参数需要减1，转换为ngx-datatable兼容的从0开始的页码后，再赋值给表格的offset属性即可完成分页联动
• 若需要调整分页按钮的样式、间距等效果，可以覆盖ngx-pagination自带的CSS类自定义样式

内容的提问来源于stack exchange，提问作者auliaguss