Element UI-Style Pagination: Native JavaScript Pagination Plugin (Original)

Add-ons

2026-07-21 13:22 3 次浏览 • 0 次下载 8.4KB

Element UI-Style Pagination: Native JavaScript Pagination Plugin (Original)

Plugin Description: This version is an upgraded edition of the previous release. It builds upon the original version with iterative improvements, making it more flexible and easier to use. (Note: This version uses most ES6 syntax and is compatible with IE11 at most.)

Last Updated: 2024-02-19 22:53:58

Changelog:Optimized the page size selection box and fixed an issue where selecting the same page size triggered the page number change event.

Last Updated: 2021-03-16 00:10:41

Changelog:Optimized the selection box animation.

Last Updated: 2021-03-06 00:47:36

Changelog:Fixed an error when navigating using the input field.

Last Updated: 2021-01-28 21:32:26

Changelog:Fixed an issue where page numbers were not displayed when the total number of items was 0.

Last Updated: 2020-12-17 21:59:12

Changelog:Optimized focus restoration after navigating using the input field.

Last Updated: 2020-12-07 22:26:31

Changelog:Fixed an error in total page count calculation when the page number module was not selected.

Last Updated: 2020-12-06 21:26:54

Changelog:Fixed an issue where the size option could not be selected by default.

Last Updated: 2020-09-21 23:37:58

Update Notes: Modified the rendering method to improve the user experience.

First Version URL

1	`https://www.jq22.com/jquery-info23323`

Last Updated: 2020-09-20 23:06:07

Update Notes: Fixed an issue causing iconfont display abnormalities.

Last Updated: 2020/9/19 9:29:55 PM

Usage

Step 1: Import the resource files:

<link rel="stylesheet" href="./css/pagination.css">
<script src="./js/pagination.js"></script>

Step 2: Use it on the page:

/**
 * layout Parameter Description:
 * 
 * total: Total number of items
 * sizes: Displays the page size selection box. TODO: The pageSizes parameter is required; otherwise, this option will not work.
 * home: Home page button
 * prev: Previous page button
 * pager: Page numbers
 * last: Last page button
 * next: Next page button
 * jumper: Navigate using the input field (triggered by blur or Enter key events)
 * 
 * */
new Pagination({
    element: '#pages', // Rendering container [Required]
    type: 1, // Style type, default is 1. Available options: [1,2]. Additional styles can be added manually. [Optional]
    layout: 'total, sizes, home, prev, pager, next, last, jumper', // [Required]
    pageIndex: 1, // Current page number [Optional]
    pageSize: 10, // Number of items displayed per page. TODO: If sizes is used, this parameter is unnecessary and will be ignored if provided. [Required]
    pageCount: 9, // Number of page numbers to display. Must be an odd number greater than or equal to 5. Default is 9. TODO: For visual consistency, only odd numbers are allowed; otherwise, an error will occur. [Optional]
    total: 1000, // Total number of data items [Required]
    singlePageHide: false, // Hide when there is only one page. Default is true. If true, pagination will not be rendered when there is only one page. [Optional]
    pageSizes: [5, 20, 30, 40, 50], // Select the number of items per page. TODO: Only takes effect when the sizes property is included in layout.
    prevText: 'Previous', // Previous page text. Defaults to an arrow icon if not provided. [Optional]
    nextText: 'Next', // Next page text. Defaults to an arrow icon if not provided. [Optional]
    ellipsis: true, // Display an ellipsis for page numbers. Default is false. [Optional]
    disabled: true, // Display disabled interaction styles. Default is false. [Optional]
    currentChange: function(index, pageSize) { // Callback triggered when the page number changes. TODO: The first parameter is the current page number. The second parameter is the number of items displayed per page and is only available when the sizes option is used.
        console.log(index, pageSize);
    }
});