简单的jQuery分页插件

所属分类:导航-分页

简单的jQuery分页插件 ie兼容8

使用方法

一、导入相关的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分页效果

简单分页效果
  分页
 17431  54

简单方便的分页

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

基于Vue的分页插件pagination.js

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

jQuery分页插件jQuery.pager.js

表格分页,li分页
  分页
 12863  31

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

    叮、???  ̄咚 0
    2017/4/27 21:44:39
    function tt(dd){
        alert(dd)
    }

      dd怎么存成全局变量呢

        葬梦1
        2017/4/29 22:21:27

        很简单

        function tt(dd){
            alert(dd);
            mm=dd;
        }

        那么这个mm就是全局变量,但是注意,不要给mm加上var


    回复
    自己的归宿_35253 0
    2017/4/27 11:19:49

    刷新页面时会初始化怎么办

        葬梦1
        2017/4/29 22:43:32

        不是很理解,按我自己的理解,在页面加载的时候不要执行初始化就好了,理解不好,见谅,提供一种思路,仅作参考

        var pageTakes={
            "init":function(page){
                  //这里是你要执行的代码(获取数据,显示数据等),但是要获取数据总量,如M
                 $("#page").initPage(M, page, tt);
            }
        }
        function tt(page){
             //不用刷新页面,直接获取数据更换你之前显示的就好
           pageTakes.init(page);
        }
    回复
    p2429077 0
    2017/4/27 10:53:06

    您好,请问页数是怎么设定的呢?

    像演示中的页数是8页,这是从哪个参数设定的?

        葬梦3
        2017/4/29 22:41:48

        这里有几个参数,我整理下:

        总量(M),当前页(P)

        $("#page").initPage(M,P,tt);

        分页最多显示个数(S),每一页显示个数(L)

        <ul class="page" maxshowpageitem="S" pagelistcount="L"  id="page"></ul>

        页数和M,L有关

        比如说:一共10条数据(M=10),每一页显示4条(L=4),那么页数就是根据这两个算出得到为3

    回复
    谭晓龙 0
    2017/4/27 8:56:51
    function tt(dd) {
        //根据页码去获取数据 
        document.location.href = "xxxx.do?index=" + dd;
        alert(dd);
    }
    $("#page").initPage(71, 1, tt);

    这里会死循环,当初始化页面会执行$("#page").initPage(71,1,tt); 

    又会去执行function tt(dd)      又获取新的数据document.location.href="xxxx.do?index="+dd; 

    获取数据后又刷新页面,又会执行$("#page").initPage(71,1,tt);

    导致死循环!!  

        谭晓龙0
        2017/4/27 9:14:00

        解决了 

        加了一个判断当前页和点击页是否一样 

        再去获取数据

        久恋0
        2017/4/28 9:22:43

        怎么解决的,求解

        葬梦3
        2017/4/29 22:35:20

        抱歉,回复晚了,我给你一个建议,这是我自己的一个写法,你作参考,如果有什么疑问,可以继续留言

        var pageTakes={
            "init":function(page){
                  //这里是你要执行的代码(获取数据,显示数据等),但是要获取数据总量,如M
                 $("#page").initPage(M, page, tt);
            }
        }
        
        function tt(page){
             //不用刷新页面,直接获取数据更换你之前显示的就好
           pageTakes.init(page);
        }

        个人比较喜欢用json,控制JS,更改页面内容,不喜欢刷新页面,所以这是我常用的做法,仅供参考,至于你说的这个,我想了一下,不是很能理解

        function tt(dd) {
            //根据页码去获取数据 
            document.location.href = "xxxx.do?index=" + dd;
            alert(dd);
        }
        $("#page").initPage(71, 1, tt);//如果是刷新页面起码应该把这个1改成当前页面的页码吧


    回复
    谭晓龙 0
    2017/4/27 8:54:04
    您好:function tt(dd){ //根据页码去获取数据 document.location.href="xxxx.do?index="+dd;    alert(dd);}  $("#page").initPage(71,1,tt);这里会死循环,当初始化页面会执行$("#page").initPage(71,1,tt); 又会去执行function tt(dd)      又获取新的数据document.location.href="xxxx.do?index="+dd; 获取数据后又刷新页面,又会执行$("#page").initPage(71,1,tt);导致死循环!!     回复
    object 0
    2017/4/25 21:11:01

    ajax放回调函数这里直接报格式错误,是这样引用的么?可以看下你的具体些的引用代码么?

        葬梦3
        2017/4/26 21:23:21

        ajax放回调函数?是下面这样?

        function tt(dd){
            //ajax代码
        }

        源码:page.js第60行

        "initPageEvent":function(listCount,fun){
                $("#"+page.pageId +">li[class='pageItem']").on("click",function(){
                    page.setPageListCount(listCount,$(this).attr("page-data"),fun,true);
                });
            },

        接着执行:

        /**
             * 设置列表总量和当前页码
             * @param listCount 列表总量
             * @param currentPage 当前页码
             */
            "setPageListCount":function(listCount,currentPage,fun,takeOnclick){
                listCount = parseInt(listCount);
                currentPage = parseInt(currentPage);
                page.initWithUl(listCount,currentPage);
                page.initPageEvent(listCount,fun);
                if(takeOnclick){
                    if(typeof fun == "function"){
                        fun(currentPage);
                    }
                }
            },

        fun(currentPage); 这个就是执行毁掉函数,cuurentPage就是你点击的页码

        所以在里面使用Ajax基本上是不会出错的。

    回复
    光脚丫1 0
    2017/4/25 19:51:13

    若我想要显示前面1、2、3页和最后一页(比如第15页)的按钮,在您的插件里,应该怎么设置?

    (不能上图,我先用以下代码表示,我想要的效果图)

    <ul class="leftfloat">
       <li>上一页</li>
       <li>首页</li>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>…</li>
       <li>15</li>
       <li>尾页</li>
       <li>下一页</li>
     </ul>
        葬梦0
        2017/4/29 23:08:49

        抱歉,最近比较忙就没有写,已经写好了,但是不打算上传,就让这个以最简单的形式存在。

        写好的在这个链接下:https://pan.baidu.com/s/1ge8rWUB,如果失效可留言邮箱,我会发送给你,使用方法和这个一样

    回复
    赵4 0
    2017/4/24 22:30:44
    大神,好厉害,快来带带我 ╀(o???)? 回复
    银狐♓ 0
    2017/4/24 14:43:16
    $('#page').on('click', '.pageItem', function (){
        console.log(22);
    });

    为什么我这样写,事件没有响应

        葬梦0
        2017/4/24 22:00:10

        因为我已经给它写了点击事件

    回复
    Hclang 0
    2017/4/21 16:07:03

    有问题,ajax刷新数据的时候,数据更新快的时候,总行数会变,这个控件不支持改变页数

        Hclang0
        2017/4/21 16:07:50

        改变总行数

        葬梦1
        2017/4/24 22:22:24
        $("#page").initPage(71,1,tt);

        第一个参数就是总行数,不过你刷新页面或者在点击页码的时候重新初始化就好

    回复
取消回复