Create the pagination for server side data

I am using KTdatatables for my list page in vue. Now I am fetching the data from API and showing it into the table. Now I want to show pagination for my table. Also, I read the documentation for that and try to write the below code but still, it doesn't show me the pagination. By default, my API returns me 10 records and I have total 200 records.

Do I need to add custom pagination code for my table?

<Datatable 
:table-header="tableHeader"
:table-data="tableData"
:enable-items-per-page-dropdown="true"
:total="200"
:current-page="1"
:rows-per-page="10"
>

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 (8)

Hi,

You can use the pagination component in the KTDatatable component, to handle a page change you can use current-change event and then just inside this event update your tableData with current page data.

You can find other available events and props in our doc.
https://preview.keenthemes.com/metronic8/vue/docs/#/kt-datatables

Okay I solved the issue. One more thing when my table data empty the default error message is not displayed. Is there any other method for that?

Also I set empty-table-text but it's not working

Hi,

By default message should be "No data found", but looks like there is an issue now, the massage is not displayed since it is wrapped with an empty template tag. I already included a fix in an upcoming release.

For now as a temporary solution follow steps below:
1)Open file src/components/kt-datatable/KTDatatable.vue.
2)Update 64th line from to

Seems to be working!
Thank you

One more issue I am facing right now. I am fetching the data from the server and rendering it in the KTDatatable.

I implement the search filter also. For ex: If user enters the order id API will return the particular order data and render it into the table. But when the user enters the wrong id in that case API return null data.

The issue is when my API returns the blank data after the search the table isn't being refreshed. it shows me the old data in my table. I tried to empty the my tableData variable but still it shows me the old data.

Could you please attach the code of your search functionality?

My search box code

API Code
ApiService.query("orderproducts", { params: searchParams })
.then(({ data }) => {
if (data.data.data) {
tableData.value.splice(0, tableData.value.length, ... data.data.data);
total.value = data.data.total;
}
})
.catch(({ err }) => {
tableData.value = {};
});

Firstly please make sure that your API request is resolved correctly, try to console.log your data and err.

If you receive your data is received then everything should work fine.

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