-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proper usage of datatable-pager #739
Comments
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. |
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:
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. |
You should just be able to update the offset/etc and the table react w/o having to use the apis. |
Hi I could not manage to make a custom footer with the pager.
The custom footer shows but the pager is missing. Any ideas? Is there a working example somewhere? |
the datatable-pager should also be part of the template (you placed it outside of the ng-template tag!) + did you define myTable? |
Moving it inside the ng-template did the trick. Also added the #myTable on the ngx-datatable tag so the change works as expected. |
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? |
Can you provide me with the complete source code ? |
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. |
I was struggling with datatable-pager. @Szabadember code helped me. Thank you. |
Really need some guidance here. In IntelliJ I am not able to track any of these [value] items to the source. 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. How the hell is it coming up with 33 pages?
|
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, ***@***.***> 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?
<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>
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#739 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AISI26JBH3VNF43CKPFV7WTRLOEHNANCNFSM4DKH6J7Q>
.
|
Can you confirm this is what is happening? |
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 |
I'm submitting a ... (check one with "x")
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:
And in component:
It prints only
{ page: x }
instead of the whole object: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
The text was updated successfully, but these errors were encountered: