Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

KTDataTable Current page active pagination bug when using route query as currentpage


hello, the active pagination is always on page 1 when I navigate back to a page but the data is fine, only the active pagination is not working correctly and just stay in page 1 everytime I navigate back to a page.

This is how I set my datatable currentpage:

const currentPage = ref(route.query.page || 1);



here's an screenshot:
https://ibb.co/Qmkk5Rm


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (14)


Hi,

route.query.page will return string value while current-page prop requires number, to fix this you can just convert your variable to number.

:current-page="Number(currentPage)"


Regards,
Lauris Stepanovs,
Keenthemes Support Team



it's still the same, the active current page in pagination is going back to page 1 when I navigate back. I also tried changing the current-page into 2, but the initial active page in pagination is still page 1.



Hi,

Could you please specify which Metronic version are you using?

Do you have any errors/warnings in your browser's console?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



hello, thank you for replying, i'm using the latest metronic in themeforest. I check and there's no error in my browser console.



I also tried putting a number directly in the currentpage props, but the active pagination is still on page 1.



Hi,

Unfortunately, I was not able to reproduce this issue in the latest version.

Could you please make sure that you are doing everything correctly?

For testing, you can try to set current-page prop to a number value.

:current-page="3"


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Could you please attach code of your page_change function?



I tried it just now, and the active pagination is still in page 1



did you mean page_change function?


const page_change = (page: number) => {
currentPage.value = page;
router.push({ query: { page : currentPage.value } });
};



I also tried removing the @page-change, but the initial active pagination is still in page 1



I'm using the default ktdatatable components from demo1 and I didn't change anything on it.



I tested our component with the code which you provided and everything still works fine. I guess the issue might be related to your custom code in the component. Do you change the value of currentPage somewhere in other places?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I see, I checked the unchange demo1 and it seems no problem, so I guess the problem is from mine, thank you for the help.



You can use watchers to track whenever your currentPage variable value has been changed.

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(