Error with serverSide mode

[mohamedhendy]

despite props "totalRows"equaling 20 it still shows on pagination "showing 1 to 10 of 10 results" the right result should be "showing 1 to 10 of 20results"

in addition to I can't go to page 2

`

            <vue3-datatable
                :rows="rows"
                :columns="cols"
                :sortable="true"
                :totalRows="pageInfo?.total"
                :search="search"
                 skin="whitespace-nowrap bh-table-hover"
                :showFirstPage="false"
                :showLastPage="false"
                :isServerMode="true"
                :pageSizeOptions="[5, 10, 20, 50, 100]"
                :paginationInfo="`${$t('showing')} {0} ${$t('to')}  {1} ${$t('of')} {2} ${$t('results')}`"
                :noDataContent="$t('ThereAreNoData')"
                @pageChange="handleCurrentChange"
                @pageSizeChange="handleSizeChange"
            >
                <template #has_images="data">
                    {{ data.has_images ? $t('found') : $t('notFound') }}
                </template>
                <template #has_videos="data">
                    {{ data.has_videos ? $t('found') : $t('notFound') }}
                </template>
                <template #action="data">
                    <div class="flex items-center">
                        <client-only>
                            <div>
                                <button
                                    @click="
                                        addNew = false;
                                        Edit = true;
                                        selectedId = data.value.id;
                                    "
                                    type="button"
                                    class="ltr:mr-2 rtl:ml-2"
                                    v-tippy:edit
                                >
                                    <icon-pencil />
                                </button>
                                <tippy target="edit">{{ $t('edit') }} </tippy>
                            </div>
                            <div>
                                <button @click="deleteModal(data.value.id, data.value.name)" type="button" v-tippy:delete>
                                    <icon-trash-lines />
                                </button>

                                <tippy target="delete">{{ $t('delete') }}</tippy>
                            </div>
                        </client-only>
                    </div>
                </template>
            </vue3-datatable>
       `

[bhaveshpatel200]

Hi ,

We have default pageSize = 10, so you have to set it to 20 like :pageSize="20" after this changes will works.

Also you can find all demos from the below link where all demos are in server side. https://vue3-datatable-document.vercel.app/

[mohamedhendy]

I copied and past your code
https://vue3-datatable-document.vercel.app/advanced https://github.com/bhaveshpatel200/vue3-datatable-document/blob/main/pages/advanced.vue and this is the result

---

for your information, I am using nuxt3

the problem as I told you "totalRows" props not working

this is code `

`

[bhaveshpatel200]

Hi,

Not sure what's problem at your side, but you can see all type of our demos including as like yours working fine.