简单的jQuery分页插件

所属分类:导航-分页

 24512  70  查看评论 (130)
简单的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);

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

相关插件-分页

jQuery分页插件

一款简单的基于jQuery的分页插件
  分页
 14192  34

jQuery分页插件kkpager

kkpager很好用的分页
  分页
 44968  84

jQuery长文本分页插件textify

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

超实用精简的分页插件

精简实用的分页插件跨域调用的聚合的api分页逻辑简单易懂接口已经写好
  分页
 8457  12

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

    YNG 0
    2017/11/13 11:18:35

    你好,我想问一下做ajax请求的时候,返回值是应该返回所有的数据,还是应该在后端写好跟pageid有关的sql查询,也就是说每次返回指定个数,和后台有关吗?

    回复
    邢猛 0
    2017/9/29 10:49:12

    大神 如果一条数据都没有,可以隐藏页码插件的显示么?

        葬梦0
        2017/9/30 20:04:42

        可以,只有执行初始化函数就可以显示了,但是呢,如果你不想要,你要删除你可以直接remove,或者不执行这个初始化函数

    回复
    Undefined 0
    2017/9/17 17:49:01

    求页码的点击事件在哪里添加  我是做后端的   看了很多的分页按钮  找不到与后台交互的入口一脸懵逼 

        葬梦0
        2017/9/18 19:08:38

        在回调函数中写ajax获取数据,然后展示

    回复
    wkd-709 0
    2017/9/5 13:39:59

    页数太多怎么办 页码咋全都显示?

        葬梦0
        2017/9/5 13:40:50
        联系我QQ:1120850353
        wkd-7090
        2017/9/5 13:45:09

        没事了 ,刚刚看错了 

        葬梦0
        2017/9/5 13:50:02

        好的,因为有人提过,然后写了一个版本,就是显示一共多少页的

    回复
    /* 0
    2017/8/19 10:57:59

    作者是个天才

        /*0
        2017/8/19 10:58:20

        真的解决了我的问题

    回复
    一颗心? 0
    2017/8/15 8:50:47

    怎么在一个页面中使用多个分页啊

        葬梦0
        2017/8/17 15:29:52
        道理都是一样的你多设置几个就好了
    回复
    web前端-朱世雄 0
    2017/8/10 11:03:25
    作者你好,怎么添加ajax 代码呀,刚开始学习前端,有太多的不会,麻烦你帮忙指导下。 回复
    懒心。 ? 0
    2017/8/8 22:55:05

    大哥,为什么我首次加载的时候页面是空的。翻到下页或者其他页 在返回来点首页的时候才有数据,还有我看别人问的 函数外怎么ajax里面的值啊。那个总量怎么设置啊。。

        懒心。 ?0
        2017/8/8 23:04:19

        大哥。那个首次加载做好了。哈哈 但是那个 总量

        $("#page").initPage(100,1,GG.kk);

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

        里面的值,我不知道怎么设成变量啊

        懒心。 ?0
        2017/8/9 9:59:49

        大哥 你这个页数的控制好像有点问题。 比如我总共有15条数据,maxshowpageitem=1;pagelistcount=1;页数就是1;$("#page").initPage(a, 1, GG.kk); 那个a就是总数量15条数据,但是一共就15条数据,一页就显示完了,这个点击下一页可以点到15??这是怎么回事啊,这个下一页应该不可以点的,我就只有一页的数据啊

        葬梦5
        2017/8/9 11:09:02

        我估计你是没有理解了,没办法截图,我只能简单和你说以下

        第一、怎么用,唉,最初的这一步,我呢只给出了怎么让这个控件运行起来,当首次加载的时候你需要自己设定一个初始函数如:

        function init(page){
        //在这里需要去获取你要加载的数据,并且获得数据的总量,比如说总量为Count
        //接着你要更具这个总量去初始化这个控件
        $("#page").initPage(Count,page,init);//这句话好好理解下,应该不难的,讨论下,这里面的数据怎么来,Count你后台获取到的数据,page当前页,可能当页面加载的时候的值,也可能是控件回调用init函数传给它的页码值
        
        }

        当页面加载的时候你就需要先调用这个函数,如:

        init(1);//通过这个函数去获取总数,初始化这个分页控件

        当然这是我给你的一个方案,至于你怎么用,方式还很多

        第二、关于参数

        先讲讲容器,代码如下:

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

        在通常情况下,maxshowpageitem(最多显示的页码个数,不包括上一页,首页,下一页,尾页,单纯的为:1、2、3、4、5)和pagelistcount(每一页显示的数据量,比如说100条数据,每一页显示1条就是有100页,如果说每一页显示50条,就有2页,着总明白了吧这个参数的作用)是已经设置好了的,如果说你要动态的去设置,也可以,总学过js和jquery吧?在初始化控件之前,也就是在执行initPage之前,利用JS或者jquery修改其属性值就好。至于怎么修改属性值......如果不会的话,就百度一下


        葬梦0
        2017/8/9 11:14:34

         比如我总共有15条数据,

        maxshowpageitem=1;
        pagelistcount=1;

        页数就是1;$("#page").initPage(a, 1, GG.kk); 那个a就是总数量15条数据,但是一共就15条数据,一页就显示完了,这个点击下一页可以点到15??这是怎么回事啊,这个下一页应该不可以点的,我就只有一页的数据啊


        关于这个问题,我实验了一下,没有问题,我也解释一下:

        maxshowpageitem=1;
        pagelistcount=1;

        意思是当前页面最多显示一条数据,分页插件,最多显示一个页码,当执行

        $("#page").initPage(15 1, GG.kk);

         的效果是分页只有首页、上一页、1(当前页)、下一页、尾页五个按钮,当点击下一页的时候控件只会显示首页、上一页、2(当前页)、下一页、尾页,当你点击尾页的时候显示首页、上一页、15(当前页)、下一页、尾页,此时下一页和尾页都不能再点击

        懒心。 ?0
        2017/8/9 13:20:03

        感谢大哥的细心指导。

    回复
    懒心。 ? 0
    2017/8/8 22:15:28
    大哥,这个要加载ajax,获取数据怎么写的啊。你那kk  dd  有点不理解啊
        葬梦1
        2017/8/9 10:29:57
        你问的问题,之前也有人问过了,GG.KK是个对象方法,也就是一个执行函数,在点击页码的时候就会调用这个函数,至于dd,这是页码,比如说我点击了第三页,那么这个dd就是返回的3
    回复
    ZaTiN 0
    2017/8/2 11:28:42

    首先先谢谢大神的作品,解决了我的难题,点个赞!!再就是问一下pagelistcount  这东西 不能用

    $('#page').attr("pagelistcount", ms.Param);

    修改吗?

        葬梦0
        2017/8/8 10:25:06

        可以的,但是要让这个语句在初始化之前执行

    回复
取消回复