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  :(