简单的jQuery分页插件

所属分类:导航-分页

 18968  56  查看评论 (103)
简单的jQuery分页插件 ie兼容8

更新时间:2017/7/10 下午4:08:23

更新说明:修复点击后不是显示当前页的bug


更新时间:2017/6/30 上午9:58:17

更新说明:关于window.location.href会平凡刷新的问题,做个更改,十分抱歉,是我考虑不周!


更新时间:2017年5月10日14:15:18

更新说明:如果使用多个分页,那么会产生冲突,这里做个调整,更改了JS代码,其它所有的都不变,包括使用方法


使用方法

一、导入相关的JS和CSS

<link href="page.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="page.js"></script>

二、创建一个分页列表ul

<ul class="page" maxshowpageitem="5" pagelistcount="10"  id="page"></ul>

注意:

maxshowpageitem :最多显示的页码数字,必需pagelistcount : 每一个页面显示的数据的个数,必需id : 不用解释了吧,必需三、初始化分页

var GG = {
        "kk":function(mm){
            alert(mm);
        }
    }
$("#page").initPage(71,1,GG.kk);

或者:

function tt(dd){
    alert(dd);
}  
$("#page").initPage(71,1,tt);

注意:自己创建的脚本函数要设置一个参数,这个参数回返回当前点击的页面的页码

相关插件-分页

基于Vue的分页插件pagination.js

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

简单方便的分页

分页功能经常使用,自己写的话难免会出现bug使用插件简单省时省力!
  分页
 20604  67

简易ajax生成分页插件

jquery分页插件,可定义ajax获取数据的路由
  分页
 11173  38

jQuery长文本分页插件textify

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

讨论这个项目(103)回答他人问题或分享插件使用方法奖励jQ币

    LLLin?? 0
    2017/7/24 16:44:04

    大神,在同一个页面有两个分页要怎么写

    回复
    斑驳?那些回忆 0
    2017/7/11 11:18:59

    如果在模态框中用分页,并不能用

    window.location.href="test.html?page="+mm,

    请教大神,怎么改

    回复
    恋上星空 0
    2017/7/9 22:56:35

    点击当前页,为什么弹出的不是当前页码

        葬梦0
        2017/7/10 16:11:23
        上次整改的时候忘记更改了,一个Bug,谢谢提醒
    回复
    地方 0
    2017/6/28 15:32:06

    我在vue里面用这个,传的那个page为什么是nan啊

        葬梦0
        2017/6/30 10:58:11

        抱歉,没有用过bue,不能帮你了

    回复
    暂无,佳?? 0
    2017/6/5 0:43:49
    调用函数的时候初始化都会默认执行一次自定义函数。。我使用windows.location.href会导致无限刷新页面。。。作者你考虑过怎么解决吗?
        小黑0
        2017/6/19 15:49:42

        我也有这问题

        葬梦1
        2017/6/30 9:55:58

        这是一个bug,已做修改,修改如下

        "setPageListCount":function(pageId,listCount,currentPage,fun){
                listCount = parseInt(listCount);
                currentPage = parseInt(currentPage);
                page.initWithUl(pageId,listCount,currentPage);
                page.initPageEvent(currentPage,pageId,listCount,fun);
        
            },
            "initPageEvent":function(currentPage,pageId,listCount,fun){
                $("#"+pageId +">li[class='pageItem']").on("click",function(){
                    if(typeof fun == "function"){
                        fun(currentPage);
                    }
                    page.setPageListCount(pageId,listCount,$(this).attr("page-data"),fun);
                });
            },
    回复
    守候千年的狐 0
    2017/6/1 18:49:00

    怎么一直都在掉一个页面,就是

    我要点击2页的时候跳到我指定的页面怎么设置呀

        葬梦0
        2017/6/30 9:56:45
        windows.location.href
    回复
    萧矢式 0
    2017/6/1 14:45:04
    你这个是只能静态私用的jquery分页吧
        葬梦0
        2017/6/3 9:22:25

        动态的也可以用啊,看你怎么用了

    回复
    zhanglonga 0
    2017/5/27 14:51:59
    大老  你的ul 结构里 定义打最大页数 跟一个显示 多少条  与初始化传进去的参数 啥区别
        葬梦3
        2017/5/27 16:32:17

        maxshowpageitem:页码最多显示几个,这是显示几个,比如说一共10页,那么显示的是12345,但是当你点击3的时候会显示23456,后面的并不是不显示了,只是被隐藏了。

        我怎么知道一共有多少页,总学过数学吧,比如说一共有100条数据(M=100)每一页最多显示10条(PP=10)那么最多有多少页?这应该理解吧?

        M就是初始化的第一个参数,PP就是ul中设置的pagelistcount

        zhanglonga0
        2017/6/1 11:34:02

        ? 你回答之前研究会了 哈哈

    回复
    叮、???  ̄咚 0
    2017/5/19 10:54:21
    var Total = "";
    function originData(param) {
          $.ajax({
              url: '/alarm_notice_sets.json?page=' + param,
              type: 'get',
              dataType: 'json',
              async: false,
              success: function(data) {
                  Total = data.list_size;
              },
              error: function(err) {
                  console.log(err)
              }
          })
      };
    $("#page").initPage(Total, 1, originData);

    请教大神  我该怎么在这里获取到变量Total呢,谢谢

        葬梦1
        2017/5/20 20:01:12
        function originData(param) {
              $.ajax({
                  url: '/alarm_notice_sets.json?page=' + param,
                  type: 'get',
                  dataType: 'json',
                  async: false,
                  success: function(data) {
                     var Total = data.list_size;
                     $("#page").initPage(Total, param, originData);
                  },
                  error: function(err) {
                      console.log(err)
                  }
              })
          };
        小钻风0
        2017/6/2 13:40:18
        这样会产生死循环的吧
        编程界的小学生0
        2017/6/17 9:56:18

        是啊,这样会产生死循环,这种代码我也是无语了。

    回复
    叮、???  ̄咚 0
    2017/5/19 10:52:24

    请教大神  我该怎么在这里获取到变量Total呢,谢谢

    回复
取消回复