Native JavaScript pagination plugin, customizable (original work)

Add-ons

2026-07-21 13:24 5 次浏览 • 0 次下载 3.6KB

Native JavaScript pagination plugin, customizable (original work)

Plugin Description: An easy-to-use pagination plugin with minimal code. Displays up to 10 page numbers at a time, with additional numbers shown through automatic switching.

Last Updated: 2020-12-08 21:02:09

Changelog:Fixed a bug where clicking the Home and Last buttons had no effect when the total number of pages changed.

Last Updated: 2020-12-07 15:16:26

Changelog:After clicking, you can reset the total number of pages or the overall number of data items.

var nums = 150, // Total count
   counts = 10; // Items per page
var p = new Page({
    el: '#test',
    nums: nums,
    counts: counts,
    defaultPage: 1,
    defaultPage: 1,
    showHeadFoot: !false, // Show Home and Last buttons
    jumpToOrder: true, // Navigate to a specified page
    showNowAndAll: true, // Current page / Total pages
    clickEvent: function(currectPage, _this) {
        console.log('Click' + currectPage + 'Page');
        // console.log(p == _this); // true
        // _this.pages = 20; //p.pages = 20; Reset the total number of pages
        _this.nums = 300; // p.nums = 300; Reset the total number of data items. Choose either this option or setting the total number of pages.
    }
});

Last Updated: 2020-09-18 01:10:33

Changelog:

1. Added navigation to a specified page.

2. Added display of the current page and total number of pages.

3. All styles can be customized.

var nums = 400, // Total count
counts = 10; // Items per page
var p = new Page({
    el: '#test',
    nums: nums,
    counts: counts,
    defaultPage: 1, // Default page
    showHeadFoot: !false, // Show Home and Last buttons. Text can be customized: head: Home, foot: Last
    jumpToOrder: true, // Navigate to a specified page. Newly added.
    showNowAndAll: true, // Current page / Total pages. Newly added.
    clickEvent: function(currectPage) {
        // alert('Clicked page ' + currectPage);
        // console.log('Clicked page ' + currectPage);
    }
});

Last Updated: 2020-09-16 23:18:58

Usage

Required Files

<link rel="stylesheet" type="text/css" href="./css/index.css" />
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>

html

1	`<div` `id='test'></div>`

var nums = 200, // Total number of data items 
ounts = 10; // Items per page. This configuration results in 20 pages. 
var p = new Page({
    el: '#test', //Controls 
    nums: nums, // Total number of data items 
    counts: counts, // Items per page 
    defaultPage: 6, // Default page number 
    showHeadFoot: !false, // Show Home and Last buttons 
    clickEvent: function(currectPage) {
        // currectPage is the clicked page number; this callback function defines what happens when a page is clicked
        // console.log('Clicked page ' + currectPage);
    }
});