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"
>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 <template> to <template v-else>
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<input
type="text"
v-model="search"
v-on:keyup.enter="getOrders()"
class="form-control form-control-solid w-250px ps-15"
placeholder="Search Orders"
/>
API CodeApiService.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.
