Pagination Issues in AntDesign and Vue 3

Question

Has anyone used AntDesign ever encountered the problem with Ant's pagination component? I call api with limit of 7 and total is 15 records, antD should return all 3 pages but it only calculates and outputs 2 pages? It doesn't seem to use the Math.celi function for calculations

Here are some related code snippets:

In View:

 <!-- Pagination -->
        <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
          <nav aria-label="Table navigation">
            <ul class="inline-flex items-center">
              <a-pagination
                v-if="!loading"
                @change="pagination"
                v-model:current="current"
                :total="totalPage"
                show-less-items
              />
            </ul>
          </nav>
        </span>

In Script:

<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
const totalPage = ref<number>();
const current = ref(1);

async function getFile(page = 1) {
  try {
    const fileData = await request.get("api/admin/file/list", {
      params: {
        page,
        limit: 7,
        name: searchName.value.trim(),
        status: stateStatus.value,
        mimetype: typeFile.value,
        lte_size: endSize.value,
        gte_size: startSize.value,
      },
    });
    files.value = fileData.data.data;

    totalPage.value = fileData.data.count;
    console.log("Total Page:",totalPage.value) //Log the correct results
    loading.value = false;
  } catch (e) {
    console.log(e);
  }
}
  
  onMounted(async () => {
    await getFile();
});

//Tính phân trang
async function pagination(pageNumber: number) {
  current.value = pageNumber;
    files.value = [];
    await getFile(pageNumber);
}
</script>

Hope to get help from everyone, thanks a lot

Pagination Issues in AntDesign and Vue 3

0 Answers0