Vue.js 中 Laravel 表格分页：终极指南

在 Vue.js 中为 Laravel 表格实现分页

什么是分页？

分页是一种数据管理技术，用于将大型数据集拆分为较小的、更易于管理的部分。在 Web 开发中，它通常用于在表格、列表或其他内容区域中显示大量数据，一次显示少量数据。这可以提高页面的性能和用户体验，因为用户不必一次加载和处理整个数据集。

如何为 Laravel 表格实现分页

在 Vue.js 中为 Laravel 表格实现分页涉及以下步骤：

1. 设置 Vue 组件

在 Vue 组件中，你需要定义一个数组来存储你的数据。在这个例子中，我们将使用一个名为 bookings 的数组：

<script>
export default {
    data() {
        return {
            bookings: []
        }
    }
}
</script>

2. 创建分页组件

接下来，创建一个分页组件，该组件将处理分页逻辑。此组件将使用 Vuex 状态管理来存储当前页码和每页的数据限制：

<template>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" :class="{ 'disabled': !hasPrev }">
                <a class="page-link" href="#" @click="prevPage">Previous</a>
            </li>
            <li class="page-item" v-for="page in pages" :key="page" :class="{ 'active': page === currentPage }">
                <a class="page-link" href="#" @click="setPage(page)">{{ page }}</a>
            </li>
            <li class="page-item" :class="{ 'disabled': !hasNext }">
                <a class="page-link" href="#" @click="nextPage">Next</a>
            </li>
        </ul>
    </nav>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
    computed: {
        ...mapState(['currentPage', 'perPage', 'totalPages']),
        pages() {
            let pages = []
            for (let i = 1; i <= this.totalPages; i++) {
                pages.push(i)
            }
            return pages
        },
        hasNext() {
            return this.currentPage < this.totalPages
        },
        hasPrev() {
            return this.currentPage > 1
        }
    },
    methods: {
        ...mapActions(['prevPage', 'nextPage', 'setPage']),
    },
}
</script>

3. 在 Vue 组件中使用分页

在你的 Vue 组件中，导入并使用分页组件，并将其与你的 bookings 数据绑定：

<template>
    <table>
        <thead>
            <tr>
                <th>Booking Number</th>
                <th>Date</th>
                <th>Status</th>
                <th>Check In Date</th>
                <th>Check Out Date</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="booking in paginatedBookings" :key="booking.id">
                <td>{{ booking.booking_number | formatBookingNumber }}</td>
                <td>{{ booking.date }}</td>
                <td>{{ booking.status }}</td>
                <td>{{ booking.check_in_date }}</td>
                <td>{{ booking.check_out_date }}</td>
            </tr>
        </tbody>
    </table>
    <pagination :bookings="bookings" />
</template>

<script>
import Pagination from '@/components/Pagination.vue'

export default {
    components: { Pagination },
    computed: {
        paginatedBookings() {
            const start = (this.currentPage - 1) * this.perPage
            const end = start + this.perPage
            return this.bookings.slice(start, end)
        }
    }
}
</script>

4. 样式分页组件

最后，在你的 CSS 文件中对分页组件进行样式化：

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
}

.pagination a:hover {
    background-color: #ccc;
}

.pagination .active a {
    background-color: #333;
    color: #fff;
}

.pagination .disabled a {
    pointer-events: none;
    cursor: not-allowed;
}

现在，你已经成功地在 Vue Laravel 表格中创建了分页。每 15 条数据将分页，并且用户可以轻松地在页面之间导航。

常见问题解答

1. 如何更改每页显示的数据量？

要更改每页显示的数据量，你需要修改分页组件中 perPage 状态的初始值：

export default {
    data() {
        return {
            perPage: 15, // Change this value to the desired number of items per page
        }
    }
}

2. 如何动态获取数据？

要动态获取数据，你可以在 Vue 组件的 mounted() 生命周期钩子中使用 axios 或其他 HTTP 请求库：

<script>
export default {
    mounted() {
        axios.get('/bookings')
            .then(response => {
                this.bookings = response.data
            })
    }
}
</script>

3. 如何在分页组件中使用过滤器？

要在分页组件中使用过滤器，你可以在 Vue 组件中使用 computed 属性：

<script>
export default {
    computed: {
        filteredBookings() {
            return this.bookings.filter(booking => booking.status === 'active')
        }
    }
}
</script>

4. 如何使用搜索功能？

要使用搜索功能，你可以在 Vue 组件中使用一个搜索输入框：

<template>
    <input type="text" v-model="search" @input="filterBookings">
</template>

<script>
export default {
    data() {
        return {
            search: ''
        }
    },
    methods: {
        filterBookings() {
            this.bookings = this.bookings.filter(booking => booking.booking_number.includes(this.search))
        }
    }
}
</script>

5. 如何保存分页状态？

要保存分页状态，你可以在 Vuex 状态管理中使用 store：

import Vuex from 'vuex'

const store = new Vuex.Store({
    state: {
        currentPage: 1,
        perPage: 15,
        totalPages: 0,
    },
    mutations: {
        setCurrentPage(state, page) {
            state.currentPage = page
        },
        setPerPage(state, perPage) {
            state.perPage = perPage
        },
        setTotalPages(state, totalPages) {
            state.totalPages = totalPages
        },
    },
    actions: {
        prevPage({ state, commit }) {
            if (state.currentPage > 1) {
                commit('setCurrentPage', state.currentPage - 1)
            }
        },
        nextPage({ state, commit }) {
            if (state.currentPage < state.totalPages) {
                commit('setCurrentPage', state.currentPage + 1)
            }
        },
        setPage({ commit }, page) {
            commit('setCurrentPage', page)
        },
    },
})