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

create custom pagination in tailwind

shafeeque answered on July 20, 2023 Popularity 10/10 Helpfulness 2/10

answer create custom pagination in tailwind

create custom pagination in tailwind

Comment

<template>
  <div class="pagination">
    <ul class="flex list-none rounded-lg my-4">
      <li v-if="pagination.current_page > 1">
        <a @click="gotoPage(pagination.current_page - 1)" class="px-3 py-2 rounded-l-lg bg-gray-200 text-gray-700 cursor-pointer">Previous</a>
      </li>

      <li v-for="pageNumber in visiblePages" :key="pageNumber">
        <a v-if="pageNumber === '...'" class="px-3 py-2 bg-gray-200 text-gray-700 cursor-pointer">...</a>
        <a v-else @click="gotoPage(pageNumber)" :class="{ 'px-3 py-2 bg-blue-500 text-white cursor-pointer': pageNumber === pagination.current_page, 'px-3 py-2 bg-gray-200 text-gray-700 cursor-pointer': pageNumber !== pagination.current_page }">{{ pageNumber }}</a>
      </li>

      <li v-if="pagination.current_page < pagination.last_page">
        <a @click="gotoPage(pagination.current_page + 1)" class="px-3 py-2 rounded-r-lg bg-gray-200 text-gray-700 cursor-pointer">Next</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    pagination: {
      type: Object,
      required: true,
    },
    visiblePages: {
      type: Array,
      required: true,
    },
  },
  methods: {
    gotoPage(page) {
      this.$emit('goto-page', page);
    },
  },
};
</script>

<style>
/* Add your custom styles for the pagination here if needed */
</style>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: chat.openai.com

Tags: pagination whatever

Link to this answer
Share Copy Link

Contributed on Jul 20 2023

shafeeque

0 Answers Avg Quality 2/10

create custom pagination in tailwind

Contents

More Related Answers

create custom pagination in tailwind

Grepper

Documentation

Social

Legal

Contact

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