好用的分页插件原生JS不依赖其他库

所属分类:导航-分页

 41733  380  查看评论 (61)
分享到微信朋友圈
X
好用的分页插件原生JS不依赖其他库 ie兼容9

更新时间:2018/9/30 上午10:45:05

更新说明:修复可跳转到负页数的bug,命名修改


支持自定义分页,首页,尾页,上一页,下一页,跳转,统计信息等

简单美观的CSS,来拿即用.

第一步:

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

第二步:

```
<div id="pagination" ></div>
```

第三步:

new myPagination({
    id: 'pagination',
    curPage: 1, //初始页码
    pageTotal: 50, //总页数
    pageAmount: 10, //每页多少条
    dataTotal: 500, //总共多少条数据
    pageSize: 5, //可选,分页个数
    showPageTotalFlag: true, //是否显示数据统计
    showSkipInputFlag: true, //是否支持跳转
    getPage: function(page) {
        //获取当前页数
        console.log(page);
    }
})
相关插件-分页

jQuery长文本分页插件textify

jQuery实现的长文本分页特效,textify是一个jQuery插件,可以自动创建一个有吸引力的和现代的你的内容布局,避免让用户不再枯燥的文本。
  分页
 33030  359

js分页插件兼容ie8(原创)

不依赖任何第三方UI库、page分页器、分页组件、兼容至ie8
  分页
 29104  305

超实用的angular.js无刷新分页完整案例

超实用的angular.js无刷新分页完整案例(需要放到服务器下运行!)
  分页
 41332  388

基于Vue的分页插件pagination.js

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

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

    一将功成万骨枯. 0
    2021/7/29 17:40:45
    怎么让我的内容与这个插件绑定,列如第一页显示第一页的内容 回复
    努力挣脱吧 0
    2019/8/28 12:10:11
    非常好用,就是使用方法说明有瑕疵,首先div是需要加class,其次new page 而不是mypagination 回复
    undefined 0
    2019/7/6 13:41:07
    我要这么让我的内容与这个插件绑定,列如第一页显示第一页的内容
        nannan5n50
        2020/11/17 13:54:36
        请问您找到方法了吗?
    回复
    liushanghfz 0
    2019/6/16 11:50:15
    如何避免每次点击页码跳转,刷新页面时,总是页码为1的li标签获得active类 回复
    ?'?' ? 0
    2019/5/26 12:12:39
    打开跳转的功能后只有输入页数的地方,没有点击跳转的地方 回复
    ?? 0
    2019/5/17 14:04:47
    样式都没有生效什么情况
        town8712063051
        2019/5/23 14:22:38
        打开myPagination.css,把里面的.pagination都改成#pagination就行了,选择器全写错了
        努力挣脱吧0
        2019/8/28 12:11:36
        主动加个class就好了
    回复
    term16 0
    2019/5/15 19:07:52
    当选择中间的那一页(pageSize: 为奇数)
    或者中间的那两页(pageSize: 为偶数),
    返回的分页码就一直没有了,请问这个怎么解决? 回复
    --陌上-℃ 1
    2019/5/14 16:36:27

    不错。插件更新了建议把上面的说明也更新一下,构造函数名变了

    new Page({
        id: 'pagination',
        pageTotal: 50, //必填,总页数
        pageAmount: 10, //每页多少条
        dataTotal: 500, //总共多少条数据
        curPage: 1, //初始页码,不填默认为1
        pageSize: 5, //分页个数,不填默认为5
        showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
        showSkipInputFlag: true, //是否支持跳转,不填默认不显示
        getPage: function(page) {
            //获取当前页数
            console.log(page);
        }
    })
    回复
    chuqing 0
    2019/4/30 11:59:43
    怎么绑到table上呀,数据怎么拿到,实现不了分页 回复
    浮生若梦 0
    2019/3/24 17:10:28
    如何将我要渲染的表格和这个插件关联起来呢
        ?0
        2019/4/10 17:15:23
        解决了吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复