DataTablePagerComponent custom number of displayed pages.

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 DataTablePagerComponent can’t be configured to display custom number of pages. Currently it’s hardcoded to display 5 pages always.

const maxSize = 5;

Expected behavior User should be able to set a custom number of elements to be displayed which fits his project requirements.

I already implemented it in my current project by adding a variable which can be passed from the template. If anyone interested I can create a pull request.

[tplk]

@mvhecke here’s an example:

Pager displays 5 pages and it’s okay when you only have pagination in the footer. But what if we need extra information there?

Well, it seems logical to reduce pager’s width so it doesn’t take 1/3 of footer’s width.

Another use case is a mobile layout where viewport width causes default pager to wrap.

[tplk]

@rahul-winner sure, here’s working example: https://plnkr.co/edit/ym689j You can create custom footer template and move select element there:

<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 class="datatable-footer_pagination">
      <datatable-pager
        [page]="curPage"
        [size]="pageSize"
        [count]="rowCount"
        [hidden]="false"
        (change)="table.onFooterPage($event)">
      </datatable-pager>
      <div class="page-limit-container">
        <select (change)="onLimitChange($event.target.value)" class="page-limit">
          <option
            *ngFor="let option of pageLimitOptions"
            [value]="option.value"
            [selected]="option.value == currentPageLimit"
          >
            {{option.value}} per page
          </option>
        </select>
      </div>
    </div>
  </ng-template>
</ngx-datatable-footer>