原生js分页插件，可自行修改（原创）

插件特效

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

插件描述：使用非常简单的分页插件，代码不多，最多显示10个数字，多出的数字会切换显示

更新时间：2020-12-08 21:02:09

更新说明：修复当总页数改变时首页尾页点击没反应的bug

更新时间：2020-12-07 15:16:26

更新说明：点击后可以重新设置总页数或者数据总体条数

var nums = 150, // 总数
   counts = 10; // 每页个数
var p = new Page({
    el: '#test',
    nums: nums,
    counts: counts,
    defaultPage: 1,
    defaultPage: 1,
    showHeadFoot: !false, // 显示首页尾页
    jumpToOrder: true, // 跳转到指定页
    showNowAndAll: true, // 当前页/共几页
    clickEvent: function(currectPage, _this) {
        console.log('点击' + currectPage + '页');
        // console.log(p == _this); // true
        // _this.pages = 20; //p.pages = 20; 重新设置总页数
        _this.nums = 300; // p.nums = 300;重新设置总数据条数 ，和设置总页数 二选一
    }
});

更新时间：2020-09-18 01:10:33

更新说明：

1. 增加了跳转到指定页。

2. 增加显示当前页和总页数。

3. 所有样式都可以自己修改。

var nums = 400, // 总数
counts = 10; // 每页个数
var p = new Page({
    el: '#test',
    nums: nums,
    counts: counts,
    defaultPage: 1, //默认页
    showHeadFoot: !false, // 显示首页尾页   文字可修改：head:首页，foot:尾页
    jumpToOrder: true, // 跳转到指定页    新增
    showNowAndAll: true, // 当前页/共几页    新增
    clickEvent: function(currectPage) {
        // alert('点击了第' + currectPage + "页");
        // console.log('点击了第' + currectPage + "页");
    }
});

更新时间：2020-09-16 23:18:58

使用方法

需要调用的文件

<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, // 数据总数 
ounts = 10; // 每页个数 ,这样就有20页 
var p = new Page({
    el: '#test', //控件 
    nums: nums, // 数据总数 
    counts: counts, // 每页个数 
    defaultPage: 6, //默认第几页 
    showHeadFoot: !false, // 显示首页尾页 
    clickEvent: function(currectPage) {
        // currectPage是点击的页数，这个回调函数就是点击了做点什么
        // console.log('点击了第' + currectPage + "页");
    }
});