原生js分页插件,可自行修改(原创)

所属分类:导航-分页

分享到微信朋友圈
X
原生js分页插件,可自行修改(原创) ie兼容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

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

js

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 + "页");
    }
});
相关插件-分页

jQuery分页插件jQuery.pager.js

表格分页,li分页
  分页
 48040  286

官网分页特效

官网分页特效
  分页
 35048  336

基于jquery和bootstrap的分页插件jqPaginator.js

基于jquery的分页插件,引入jquery.js 、bootstrap.css该插件即可
  分页
 44336  278

基于Vue的分页插件pagination.js

基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.js
  分页
 50767  271

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    キセキ^未来 0
    2020/12/7 11:16:21
    您好,数据总量一般来说是会变化的,而且一开始也得不到。只有经过一次ajax请求才能设置数据总量。看您的源码里面好像没有update之类的更新方法。或者说您有其他解决的办法吗?
        ...0
        2020/12/7 12:33:44
        感谢建议,已更新。
        キセキ^未来0
        2020/12/7 14:07:53
        是文件没有上传吗,下载了还是原版的
        ...0
        2020/12/7 15:05:15
        上传之后要审核,还没审核好
        キセキ^未来0
        2020/12/7 15:39:01
        哦哦明白了,非常感谢您🌹
    回复
    0
    2020/12/4 17:19:05
    每次重新请求数据 怎么配置最新总数量,我写的会重新new一个出来。。。
        ...0
        2020/12/4 17:28:47
        总数量是会变的吗?
    回复
    梧桐 0
    2020/11/26 14:08:46
    还是非常感谢分享 回复
    梧桐 0
    2020/11/26 14:08:06
    跳转到第几页出现乱码了怎么解决?
    回复
    I 0
    2020/11/18 17:54:36
    感谢,十分感谢,花费2天时间没搞定的问题,您这个代码几分钟就解决了 回复
    Suntz 0
    2020/10/4 0:40:28
    感谢轮子哥,轮子跑得飞快!🍺 回复
    ... 0
    2020/9/17 11:05:34
    有什么问题可以问 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复