Hello, I'm interested in your Vue3 datatable. I've implemented it as client-side rendering and it's working fine, but there are some cases where I need it to work as server-side rendering. After studying your code, I found some points to make it work as server-side rendering. Among these, I need to define a few variables: totalRows
(total data), page
(current page), and the pageChange
event.
However, there is a problem when I define totalRows
. I want it to be automatically calculated based on maxPage
, as I see in line 484:
const maxPage = computed(() => {
const totalPages =
<number>currentPageSize.value < 1
? 1
: Math.ceil(<number>filterRowCount.value / <number>currentPageSize.value);
return Math.max(totalPages || 0, 1);
});
But for some reason, totalRows
doesn't seem to be assigned as the amount of data. Instead, it automatically calculates rows.length
.
This is my API structure:
{
current_page: 1,
data: […],
max_page: 23,
messages: "",
recordsTotal: 229,
state: true
}
When I fetch the API, I assign it to data, where the variable totalData
is taken from API.recordsTotal
and currentPage
from API.current_page
. This is how I call it in the Vue3 datatable:
<vue3-datatable
:rows="data"
:page="currentPage"
:columns="headings"
:totalRows="totalData"
:sortable="true"
:showPageSize="false"
:stickyFirstColumn="true"
@pageChange="pageChange"
>
However, what is displayed in the browser is not what I want. I want it to display "Showing 1 to 10 of 229 entries", and there are a number of pages (with empty data) where the user clicks and it triggers the pageChange
event to fill in the data.
![image](https://user-images.githubusercontent.com/55048401/222032123-87305d48-9c21-4262-a4f0-e34b622b488a.png)