Proper usage of datatable-pager

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ X ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior The datatable-pager has been exported in #1046f84, so it would be good to show a demo on how to use it…

Actually if I have a template like this:

<ngx-datatable (page)="handlePageChange($event)">
  <ngx-datatable-footer>
    <ng-template 
      let-curPage="curPage" 
      let-offset="offset" 
      let-pageSize="pageSize" 
      let-rowCount="rowCount" 
      let-selectedCount="selectedCount" 
      ngx-datatable-footer-template>
    </ng-template>
    <datatable-pager 
      [count]="rowCount" 
      [page]="curPage" 
      [size]="pageSize" 
      (change)="handlePageChange($event)">
    </datatable-pager>
  </ngx-datatable-footer>
<ngx-datatable>

And in component:

handlePageChange (event: any): void {
  console.log(event); 
}

It prints only { page: x } instead of the whole object:

obj = {
  count: x, 
  pageSize: x, 
  limit: x, 
  offset: x
};

Expected behavior It must return the full object on datatable-pager.

Also, since it’s exported now, shouldn’t it be renamed to ngx-datatable-pager?

• Table version: 9.1.0

• Angular version: 4.0.3

[Szabadember]

I created the pull request to export it, I only concentrated on the fact that this component is needed to make a proper custom footer 😃 .

I figured out how to use it by reading the source code. This is how I do it:

HTML:

<datatable-pager
    [pagerLeftArrowIcon]="'datatable-icon-left'"
    [pagerRightArrowIcon]="'datatable-icon-right'"
    [pagerPreviousIcon]="'datatable-icon-prev'"
    [pagerNextIcon]="'datatable-icon-skip'"
    [page]="curPage"
    [size]="pageSize"
    [count]="rowCount"
    [hidden]="!((rowCount / pageSize) > 1)"
    (change)="myTable.onFooterPage($event)">
</datatable-pager>

The change handler is really important to make paging work, you have to call the onFooter event handler of your ngx-datatable which I call myTable (Mark it as a child view #myTable).

I also think it would be a good idea to rename it.

[gyulauszkai]

Hi

I could not manage to make a custom footer with the pager. My code

<ngx-datatable
    class="material"
    [messages]="customMessages"
    [rows]="objectsToDisplay"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="150"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    [limit]="page.size"
    (page)='setPage($event)'
    [selectionType]="'single'"
    (select)="onSelect($event)"
  >
    <ngx-datatable-column [flexGrow]="1" prop="transactionNumber">
      <ng-template ngx-datatable-header-template>
        {{Number_Header}}
      </ng-template>
    </ngx-datatable-column>
 <ngx-datatable-footer>
      <ng-template
        ngx-datatable-footer-template
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount",
        let-curPage="curPage"
        let-offset="offset">
        <div style="padding: 5px 10px">
          <div>
            <strong>Summary</strong>: Gender: Female
          </div>
          <hr style="width:100%" />
          <div>
            Rows: {{rowCount}} |
            Size: {{pageSize}} |
            Current: {{curPage}} |
            Offset: {{offset}}
          </div>
        </div>
      </ng-template>
      <datatable-pager
        [pagerLeftArrowIcon]="'datatable-icon-left'"
        [pagerRightArrowIcon]="'datatable-icon-right'"
        [pagerPreviousIcon]="'datatable-icon-prev'"
        [pagerNextIcon]="'datatable-icon-skip'"
        [page]="curPage"
        [size]="pageSize"
        [count]="rowCount"
        [hidden]="!((rowCount / pageSize) > 1)"
        (change)="myTable.onFooterPage($event)">
      </datatable-pager>
    </ngx-datatable-footer>
  </ngx-datatable>

The custom footer shows but the pager is missing. Any ideas? Is there a working example somewhere?