Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Writing in the front

In b-end Web development, paging component or pager, is one of the more commonly used controls, usually with a table or list, to achieve a large amount of data, paging data disassembly function.

Due to the size of the full implementation, I’ve broken it down into the following sections. Here’s the first: Basic implementation. If you want to see the full source code implementation, go to the Pagination page component

  • Basic implementation
  • Paging control
  • Custom control layout
  • Limit the maximum number of pages

Component Props

The rendering of the paging component needs to know the size of the data volume, total, and the number of pages to be displayed per page, pageSize, to determine the total number of pages. There is also the current page pageNum, which you can bind to using the V-Model property if possible. If you want to support switching the number of displays, you also need to pass in sizeList to configure the optional number of displays.

As above, to implement the simplest paging component, you need to include the props property:

const props = defineProps({
    total: { type: [Number.String].default: 0 }, // The total number of
    pageNum: { type: [Number.String].default: 1 }, // The current number of pages
    pageSize: { type: [Number.String].default: () = > 10 }, // Display Size of entries per page

    / / is optional
    sizesList: { type: Array.default: () = > [10.20.50.100]},// Option setting to display number of entries per page
});
Copy the code

Component Emits

The paging component needs to trigger an event to notify the parent component to jump to the specified page number page-change. Simple processing logic includes previous page, next page, and specified page number. If the number of display items per page is optional, the size-change event is triggered.

const emit = defineEmits(["page-change"."size-change"]);
Copy the code

The core to realize

This completes the minimal property and event design for a simple paging component, followed by the implementation of some core methods within the component.

Use ref to define reactive variables for use by components. Total =”100″ and :total=”100″ can be written as either a String or a Number. Therefore, when working with these attributes, be careful to convert the data type to Number.

/** Currently active page number */
const currentPage = ref(Number(props.pageNum));

/** Number of items per page */
const currentPageSize = ref(Number(props.pageSize));

/** Total pages */
const totalPagesNum = ref(0);
Copy the code

Sets the currently active page number

When performing “Previous Page”, “Next page” or “specify page number” operations, you need to set the current active page number, determine whether the current page is the first or last page, disable the page up and down button, and trigger an event to reload data for the parent component.

/** * Sets the currently active page number *@param {Stirng} Type 'prev'- previous page, 'next'- next page, 'page'- specify page number *@param {Number} pageNum* /

const setCurrentPage = (type, pageNum = 1) = > {
    let num = currentPage.value;
    type === "prev" ? num-- : type === "next" ? num++ : (num = Number(pageNum));

    // Limit the page number boundary value, the minimum is 1, the maximum does not exceed the total number of pages
    currentPage.value = num < 1 ? 1 : num > totalPagesNum.value ? totalPagesNum.value : num;
    emit("page-change", currentPage.value);
};

Copy the code

Set the number of items to be displayed on a page

Pager should normally support switching the number of entries per page, so after switching events need to be triggered to reload data for the parent component.

/** * Sets the number of items to be displayed per page *@param {Number} v* /
const setCurrentPageSize = (v) = > {
    currentPageSize.value = Number(v);
    emit("size-change", currentPageSize.value);
};

Copy the code

Initialize components

When you initialize the component, you need to count the total page count and call setCurrentPage to determine whether the pageNum passed in exceeds the boundary value.

watchEffect(() = > {
    // Count the total pages based on the total passed in
    totalPagesNum.value = Math.ceil(props.total / currentPageSize.value);

    // Accordingly, when the number of pages per page and the total number of pages changes, the current active page needs to be reset to prevent overflow of boundary values
    setCurrentPage("page", currentPage.value);
});
Copy the code

Welcome to other articles

  • Internationalize your website with Vite2+Vue3 | August Update Challenge
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool