Breaking News: Grepper is joining You.com. Read the official announcement!

create pagination component for above table,

shafeeque answered on August 2, 2023 Popularity 2/10 Helpfulness 1/10

answer create pagination component for above table,

create pagination component for above table,

Comment

<template>
  <nav class="flex items-center justify-between">
    <button
      class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
      @click="changePage(currentPage - 1)"
      :disabled="currentPage <= 1"
    >
      Previous
    </button>
    <div>
      <ul class="flex list-none">
        <li
          class="mx-1"
          v-for="page in totalPages"
          :key="page"
          :class="{ 'bg-blue-500 text-white': currentPage === page }"
        >
          <button @click="changePage(page)">{{ page }}</button>
        </li>
      </ul>
    </div>
    <button
      class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r"
      @click="changePage(currentPage + 1)"
      :disabled="currentPage >= totalPages"
    >
      Next
    </button>
  </nav>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    totalRecords: {
      type: Number,
      required: true,
    },
    recordsPerPage: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalRecords / this.recordsPerPage);
    },
  },
  methods: {
    changePage(page) {
      if (page > 0 && page <= this.totalPages) {
        this.$emit("page-changed", page);
      }
    },
  },
};
</script>

<style scoped>
</style>

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: pagination whatever

Link to this answer
Share Copy Link

Contributed on Aug 02 2023

shafeeque

0 Answers Avg Quality 2/10

create pagination component for above table,

Contents

More Related Answers

create pagination component for above table,

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.