Pagination vue 3-CodePudding

I have a local array with data which i pass to a table. I created variables: page,limit,totalPage and function changePage. In hook onMounted I calculate the number of pages based on the given limit. Through the v-for loop, displayed the pages and made them clickable on the function, but I don't understand how to set the limit of displayed table elements, and how to make pagination work.

<template>
  <div >
    <Dialog
      :showForm="showForm"
      @changeToggle="changeToggle"
      @hideDialog="hideDialog"
    >
      <PostForm @create="createPost" />
    </Dialog>
    <Select v-model="selectedSort" :options="sortOptions" />
  </div>

  <input type="text" v-model="searchQuery" />

  <Table :tableData="searchAndSort" />

  <div >
    <div
      v-for="(pageNumber, i) in totalPage"
      :key="i"
      @click="changePage(pageNumber)"
      
      :
    >
      {{ pageNumber }}
    </div>
  </div>
</template>

<script>
import Table from "./components/Table.vue";
import Dialog from "./components/UI/Dialog.vue";
import PostForm from "./components/PostForm.vue";
import Select from "./components/UI/Select.vue";

import { ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";

export default {
  name: "App",
  components: {
    ...
  },
  setup() {
    const showForm = ref(false);
    const searchQuery = ref("");
    const tableData = ref([
    ...
    ]);
    const selectedSort = ref("");
    const sortOptions = ref([
    ...
    ]);

    const page = ref(1);
    const limit = ref(5);
    const totalPage = ref(0);

    onMounted(() => {
      totalPage.value = Math.ceil(tableData.value.length / limit.value);
    });

    const changePage = (pageNumber) => {
      page.value = pageNumber;
    };

    const createPost = (post) => {
      tableData.value.push(post);
      showForm.value = false;
    };
    const changeToggle = (toggle) => {
      showForm.value = !toggle;
    };
    const hideDialog = (val) => {
      showForm.value = val;
    };

    const sortedPosts = computed(() => {
    ...
    });

    const searchAndSort = computed(() => {
    ...
    });

    return {
      showForm,
      tableData,
      selectedSort,
      sortOptions,
      searchQuery,

      changeToggle,
      hideDialog,
      createPost,

      sortedPosts,
      searchAndSort,

      page,
      limit,
      totalPage,
      changePage,
    };
  },
};
</script>

CodePudding user response：

In order to show a portion of an array you can use Array.slice. (docs)

in your searchAndSort you should do something like this:


const searchAndSort = computed(() => {
    const start = (page.value - 1) * limit.value;
    const end = (page.value * limit.value) 1;
    return tableData.value.slice(start, end);
});

page - 1 * limit - initially this will result in 0 * 5 meaning start from 0 (-1 is used because the page start from 1. When you go to the second page this will result in 1 * 5, etc. end is defined by the limit itself multiplying the page. So on the first page, you will slice the array from 0 to 5, on the second page - from 5 to 10, etc.

const end = (page.value * limit.value) 1; - 1 will give you the 5th element because Array.slice exlude the item at the end index)

You should add some checks as well.