Ngx-datatable: Proper usage of datatable-pager

[rafaelss95]

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

[timwright35]

Adding to this: It would me nice for information on how to make the pager, in a custom footer, feed the page information back into the table right (If it can even do that).

The pager also seems to auto do flex: 0 0 60%, which in a custom footer messes things up.

[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.

[amcdnl]

You should just be able to update the offset/etc and the table react w/o having to use the apis.

[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?

[Szabadember]

the datatable-pager should also be part of the template (you placed it outside of the ng-template tag!) + did you define myTable?

[gyulauszkai]

Moving it inside the ng-template did the trick. Also added the #myTable on the ngx-datatable tag so the change works as expected.
Koszi szepen ;)

[gyulauszkai]

I do have another question. If I have a public property from my component and put in in the footer template simply with {{myvar}} it will display the initial value, but will not update the template when the variable is changed. Why?

[ayushmishra2]

Can you provide me with the complete source code ?

[gyulauszkai]

Unfortunately I don't have access to the code anymore. But it was very simple. We wanted to display some flag, but it always displayed the initial value and not react to change.

[jomol-aima]

I was struggling with datatable-pager. @Szabadember code helped me. Thank you.

[edjm1971]

Really need some guidance here.
I have no idea where or how these values are being set or where they are to be set at.
Everything that has var = value.
Every example I see has this format and even the project that I'm on uses it.

In IntelliJ I am not able to track any of these [value] items to the source.
Are these supposed to be defined in the component? somewhere else, is it just black boxed and does magic?

I am asking because everyone thought it has been working just fine for the past 2 years, I'm new on the project and it's one of the first things I noticed that does not work correctly.
For example I have 292 records returned (verified in the package via debugger) and somehow I have 33 pages to click through.
If my limit of 22 is not for pages to use then I'd think it were to be for rows per page. That would equate to 14 pages.

How the hell is it coming up with 33 pages?

<ngx-datatable
        [columnMode]="ColumnMode.force"
        [count]="myVarForCount"
        [externalPaging]="false"
        [limit]=22    // Not clear is total rows per page or number of pages to use to display rows on
        [rows]="myVarForRowsData" // I have 292 records returned in my query
      >
      </ngx-datatable>
<ngx-datatable-footer>
      <ng-template ngx-datatable-footer-template
        let-rowCount="rowCount" // No idea where value comes from
        let-pageSize="pageSize"   // No idea where value comes from
        let-selectedCount="selectedCount" // No idea where value comes from
        let-curPage="curPage"      // No idea where value comes from
        let-offset="offset">           // No idea where value comes from
        <div style="padding: 5px 10px">...</div>
      </ng-template>
      <datatable-pager
        [page]="curPage"     // No idea where value comes from
        [size]="pageSize"     // No idea where value comes from
        [count]="rowCount"// No idea where value comes from
        [hidden]="!((rowCount / pageSize) > 1)">  // No idea where value comes from
      </datatable-pager>
    </ngx-datatable-footer>

[ayushmishra2]

The value must be mapped to the .ts file of the component. Its property
binding feature of angular. You can copy the attribute and search it in the
.ts file of the component and you will find the variable it references.

On Wed, 8 Apr, 2020, 1:58 am Elijah, [e-mail] wrote:

Really need some guidance here.
I have no idea where or how these values are being set or where they are
to be set at.
Everything that has var = value.
Every example I see has this format and even the project that I'm on uses
it.

In IntelliJ I am not able to track any of these [value] items to the
source.
Are these supposed to be defined in the component? somewhere else, is it
just black boxed and does magic?

I am asking because everyone thought it has been working just fine for the
past 2 years, I'm new on the project and it's one of the first things I
noticed that does not work correctly.
For example I have 292 records returned (verified in the package via
debugger) and somehow I have 33 pages to click through.
If my limit of 22 is not for pages to use then I'd think it were to be for
rows per page. That would equate to 14 pages.

How the hell is it coming up with 33 pages?

[columnMode]="ColumnMode.force"
[count]="myVarForCount"
[externalPaging]="false"
[limit]=22 // Not clear is total rows per page or number of pages to use to display rows on
[rows]="myVarForRowsData" // I have 292 records returned in my query
>


let-rowCount="rowCount" // No idea where value comes from
let-pageSize="pageSize" // No idea where value comes from
let-selectedCount="selectedCount" // No idea where value comes from
let-curPage="curPage" // No idea where value comes from
let-offset="offset"> // No idea where value comes from

...

[page]="curPage" // No idea where value comes from
[size]="pageSize" // No idea where value comes from
[count]="rowCount"// No idea where value comes from
[hidden]="!((rowCount / pageSize) > 1)"> // No idea where value comes from

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/739#issuecomment-610603789,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AISI26JBH3VNF43CKPFV7WTRLOEHNANCNFSM4DKH6J7Q
.

[edjm1971]

Can you confirm this is what is happening?
In the ng-template, let-rowCount="rowCount"... rowCount is the binder
In the datatable-pager [count]="rowCount"... rowCount refers to the above let-rowCount

[PiyushAgrawal1243]

In theng-tenplate , i am changing let-rowCount="rowCount" to let-rowCountForName="rowcountForName" and changing all the places where I am using rowCount but total count and page offset change not visible in Ui. how can I use a custom name