Angular 7 and material page event on paginator is only showing one new row when page index is changedAngular 2 change event on every keypressHow to detect when an @Input() value changes in Angular?ag-grid save selected row class even onpagination changedAngular Material Table: Detect what rows (items) are currently being displayedHow to implement pageSize change in Infinite row Model in ag-grid?Angular 4 Material use mat-paginator with images?Angular Material Table with sort and paginatorAngular Material Paginator is undefinedreset paginator first page angular materialAngular Material Paginator position problem

When quoting, must I also copy hyphens used to divide words that continue on the next line?

Is there a conventional notation or name for the slip angle?

What does this horizontal bar at the first measure mean?

What does the Rambam mean when he says that the planets have souls?

Global amount of publications over time

Journal losing indexing services

Drawing a topological "handle" with Tikz

Will adding a BY-SA image to a blog post make the entire post BY-SA?

If a character with the Alert feat rolls a crit fail on their Perception check, are they surprised?

Greco-Roman egalitarianism

Can I sign legal documents with a smiley face?

How do I repair my stair bannister?

Why does Async/Await work properly when the loop is inside the async function and not the other way around?

How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?

Do the concepts of IP address and network interface not belong to the same layer?

How do ground effect vehicles perform turns?

How to color a curve

Why has "pence" been used in this sentence, not "pences"?

Has Darkwing Duck ever met Scrooge McDuck?

Some numbers are more equivalent than others

Reply 'no position' while the job posting is still there

What is this type of notehead called?

Proving a function is onto where f(x)=|x|.

Is it possible to use .desktop files to open local pdf files on specific pages with a browser?



Angular 7 and material page event on paginator is only showing one new row when page index is changed


Angular 2 change event on every keypressHow to detect when an @Input() value changes in Angular?ag-grid save selected row class even onpagination changedAngular Material Table: Detect what rows (items) are currently being displayedHow to implement pageSize change in Infinite row Model in ag-grid?Angular 4 Material use mat-paginator with images?Angular Material Table with sort and paginatorAngular Material Paginator is undefinedreset paginator first page angular materialAngular Material Paginator position problem













0















I am using (page) event on <mat-paginator>:



<mat-paginator #paginator 
[pageSizeOptions]="[5, 10, 25, 100, 1000]"
[pageSize]="pageSize" [showFirstLastButtons]="true"
[length]="total" (page)="getData($event)"
*ngIf="total>0">
</mat-paginator>


To change the data displayed in a <mat-table>.



When a user change the page number of using arrows to back and forward, the (page) event is fired:



getData(e)

//this.oldPageSize = e.pageSize
//console.log(e.pageIndex+' '+e.pageSize )
this.getKits('defined', e.pageIndex, e.pageSize);



getKits() will go to server and the following script will be executed:



$sql = 'SELECT (SELECT count(*) FROM kit) as total, kit_id as id, kit_name as name,
type_of_kit as ktype, received_quantity as quantity, kit_status as kstatus, date_added as da
FROM kit
ORDER BY system_date DESC
LIMIT :p, :s
';

$exec = $conn->prepare($sql);
$exec->bindValue(':p', $page, PDO::PARAM_INT);
$exec->bindValue(':s', $size, PDO::PARAM_INT);
$exec->execute();
$res = $exec->fetchAll();


On component load, the pageIndex and pageSize are 0 and 5. And when the getData(e) is fired, they will be changed.



The problem is that, when the first initial data are loaded (5 rows), and when I go to next page of paginator, it will be getKits('defined', 1, 6) and only one new row is shown at the bottom, and one old row is removed from it.



What I need is to show the next 5 rows. Maybe next 10 rows. (Here the number is about the size selected).










share|improve this question






















  • Multiply the page index by the page size ?

    – trichetriche
    Mar 7 at 9:23











  • That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

    – alim1990
    Mar 7 at 9:25












  • Well no problem

    – trichetriche
    Mar 7 at 9:30















0















I am using (page) event on <mat-paginator>:



<mat-paginator #paginator 
[pageSizeOptions]="[5, 10, 25, 100, 1000]"
[pageSize]="pageSize" [showFirstLastButtons]="true"
[length]="total" (page)="getData($event)"
*ngIf="total>0">
</mat-paginator>


To change the data displayed in a <mat-table>.



When a user change the page number of using arrows to back and forward, the (page) event is fired:



getData(e)

//this.oldPageSize = e.pageSize
//console.log(e.pageIndex+' '+e.pageSize )
this.getKits('defined', e.pageIndex, e.pageSize);



getKits() will go to server and the following script will be executed:



$sql = 'SELECT (SELECT count(*) FROM kit) as total, kit_id as id, kit_name as name,
type_of_kit as ktype, received_quantity as quantity, kit_status as kstatus, date_added as da
FROM kit
ORDER BY system_date DESC
LIMIT :p, :s
';

$exec = $conn->prepare($sql);
$exec->bindValue(':p', $page, PDO::PARAM_INT);
$exec->bindValue(':s', $size, PDO::PARAM_INT);
$exec->execute();
$res = $exec->fetchAll();


On component load, the pageIndex and pageSize are 0 and 5. And when the getData(e) is fired, they will be changed.



The problem is that, when the first initial data are loaded (5 rows), and when I go to next page of paginator, it will be getKits('defined', 1, 6) and only one new row is shown at the bottom, and one old row is removed from it.



What I need is to show the next 5 rows. Maybe next 10 rows. (Here the number is about the size selected).










share|improve this question






















  • Multiply the page index by the page size ?

    – trichetriche
    Mar 7 at 9:23











  • That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

    – alim1990
    Mar 7 at 9:25












  • Well no problem

    – trichetriche
    Mar 7 at 9:30













0












0








0








I am using (page) event on <mat-paginator>:



<mat-paginator #paginator 
[pageSizeOptions]="[5, 10, 25, 100, 1000]"
[pageSize]="pageSize" [showFirstLastButtons]="true"
[length]="total" (page)="getData($event)"
*ngIf="total>0">
</mat-paginator>


To change the data displayed in a <mat-table>.



When a user change the page number of using arrows to back and forward, the (page) event is fired:



getData(e)

//this.oldPageSize = e.pageSize
//console.log(e.pageIndex+' '+e.pageSize )
this.getKits('defined', e.pageIndex, e.pageSize);



getKits() will go to server and the following script will be executed:



$sql = 'SELECT (SELECT count(*) FROM kit) as total, kit_id as id, kit_name as name,
type_of_kit as ktype, received_quantity as quantity, kit_status as kstatus, date_added as da
FROM kit
ORDER BY system_date DESC
LIMIT :p, :s
';

$exec = $conn->prepare($sql);
$exec->bindValue(':p', $page, PDO::PARAM_INT);
$exec->bindValue(':s', $size, PDO::PARAM_INT);
$exec->execute();
$res = $exec->fetchAll();


On component load, the pageIndex and pageSize are 0 and 5. And when the getData(e) is fired, they will be changed.



The problem is that, when the first initial data are loaded (5 rows), and when I go to next page of paginator, it will be getKits('defined', 1, 6) and only one new row is shown at the bottom, and one old row is removed from it.



What I need is to show the next 5 rows. Maybe next 10 rows. (Here the number is about the size selected).










share|improve this question














I am using (page) event on <mat-paginator>:



<mat-paginator #paginator 
[pageSizeOptions]="[5, 10, 25, 100, 1000]"
[pageSize]="pageSize" [showFirstLastButtons]="true"
[length]="total" (page)="getData($event)"
*ngIf="total>0">
</mat-paginator>


To change the data displayed in a <mat-table>.



When a user change the page number of using arrows to back and forward, the (page) event is fired:



getData(e)

//this.oldPageSize = e.pageSize
//console.log(e.pageIndex+' '+e.pageSize )
this.getKits('defined', e.pageIndex, e.pageSize);



getKits() will go to server and the following script will be executed:



$sql = 'SELECT (SELECT count(*) FROM kit) as total, kit_id as id, kit_name as name,
type_of_kit as ktype, received_quantity as quantity, kit_status as kstatus, date_added as da
FROM kit
ORDER BY system_date DESC
LIMIT :p, :s
';

$exec = $conn->prepare($sql);
$exec->bindValue(':p', $page, PDO::PARAM_INT);
$exec->bindValue(':s', $size, PDO::PARAM_INT);
$exec->execute();
$res = $exec->fetchAll();


On component load, the pageIndex and pageSize are 0 and 5. And when the getData(e) is fired, they will be changed.



The problem is that, when the first initial data are loaded (5 rows), and when I go to next page of paginator, it will be getKits('defined', 1, 6) and only one new row is shown at the bottom, and one old row is removed from it.



What I need is to show the next 5 rows. Maybe next 10 rows. (Here the number is about the size selected).







mysql angular limit angular7 paginator






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 7 at 9:20









alim1990alim1990

1,06811536




1,06811536












  • Multiply the page index by the page size ?

    – trichetriche
    Mar 7 at 9:23











  • That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

    – alim1990
    Mar 7 at 9:25












  • Well no problem

    – trichetriche
    Mar 7 at 9:30

















  • Multiply the page index by the page size ?

    – trichetriche
    Mar 7 at 9:23











  • That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

    – alim1990
    Mar 7 at 9:25












  • Well no problem

    – trichetriche
    Mar 7 at 9:30
















Multiply the page index by the page size ?

– trichetriche
Mar 7 at 9:23





Multiply the page index by the page size ?

– trichetriche
Mar 7 at 9:23













That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

– alim1990
Mar 7 at 9:25






That's it. I wa trying some simple logic and math on it to figure it out. Thanks. @trichetriche

– alim1990
Mar 7 at 9:25














Well no problem

– trichetriche
Mar 7 at 9:30





Well no problem

– trichetriche
Mar 7 at 9:30












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55040130%2fangular-7-and-material-page-event-on-paginator-is-only-showing-one-new-row-when%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55040130%2fangular-7-and-material-page-event-on-paginator-is-only-showing-one-new-row-when%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко