首页 > 代码库 > jQuery实现分页

jQuery实现分页

转载地址

http://www.cnblogs.com/xiaoruoen/archive/2012/01/11/2318199.html

;(    function($){        $.extend({                "easypage":function(options){                    options = $.extend({//参数设置                        contentclass:"contentlist",//要显示的内容的class                        navigateid:"navigatediv",//导航按钮所在的dom的id                        everycount:"5",//每页显示多少个                        navigatecount:"5"//导航按钮一次显示多少个                        },                        options);                    var currentpage = 0;//当前页                        var contents = $("."+options.contentclass);//要显示的内容                    var contentcount = contents.length;//得到内容的个数                    var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数                    //拼接导航按钮                    var navigatehtml = "<div id=‘pagefirst‘ class=‘pagefirst‘><a href=‘javascript:void(0)‘>首页</a></div><div id=‘pagepre‘ class=‘pagepre‘><a href=‘javascript:void(0)‘>上一页</a></div>";                    for(var i = 1;i <= pagecount;i++){                            navigatehtml+=‘<div class="pagenavigate"><a href="javascript:void(0)">‘+i+‘</a></div>‘;                    }                    navigatehtml+="<div id=‘pagenext‘ class=‘pagenext‘><a href=‘javascript:void(0)‘>下一页</a></div><div id=‘pagelast‘ class=‘pagelast‘><a href=‘javascript:void(0)‘>尾页</a></div>";                                        //加载导航按钮                    $("#"+options.navigateid).html(navigatehtml);                                            //得到所有按钮                    var navigates = $(".pagenavigate");                                        //隐藏所有的导航按钮                    $.extend({                        "hidenavigates":function(){                            navigates.each(function(){                                $(this).hide();                            })                            }                        });                                        //显示导航按钮                    $.extend({                        "shownavigate":function(currentnavigate){                            $.hidenavigates();                            var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;                            if(begin>navigates.length-2*options.navigatecount){                                begin = navigates.length-2*options.navigatecount;                                }                            for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){                                $(navigates[i]).show();                            }                        }                        });                                        //高亮显示某个按钮                    $.extend({                        "lightnavigate":function(currentnavigate){                            currentnavigate.addClass("pagenavigateon");                            }                        });                                        //移除所有高亮按钮                    $.extend({                        "removelight":function(){                            $(".pagenavigateon").each(                                function(){                                    $(this).removeClass("pagenavigateon");                                    }                            )                         }                        });                                        //显示某页的内容                    $.extend({                        "showPage":function(page){                            contents.each(                                function(contentindex){                                    if(contentindex>=page*options.everycount && contentindex < (page+1)*options.everycount){                                    $(this).show();                                        }else{                                    $(this).hide();                                        }                                }                            );                        }                    });                                        //隐藏前进后退按钮                    $.extend({                        "hidePreNext":function(page){                                if(page==pagecount-1){                                    $("#pagenext").hide();                                        $("#pagelast").hide();                                    $("#pagepre").show();                                    $("#pagefirst").show();                                            }else if(page==0){                                    $("#pagepre").hide();                                    $("#pagefirst").hide();                                        $("#pagenext").show();                                        $("#pagelast").show();                                    }else{                                    $("#pagenext").show();                                    $("#pagepre").show();                                        $("#pagefirst").show();                                        $("#pagelast").show();                                    }                        }                        });                    //显示指定的导航按钮                    $.shownavigate(0);                    //隐藏所有的内容                    $.showPage(0);                    //开始时隐藏后退按钮                    $.hidePreNext(0);                    //高亮显示第一个按钮                    if(pagecount>0){                            $.lightnavigate($(navigates.get(0)));                    }                    //点击导航按钮                    $(".pagenavigate").each(                        function(myindex){                            $(this).click(                                function(){                                    $.showPage(myindex);                                    $.removelight();                                    $.lightnavigate($(this));                                    currentpage = myindex;                                    $.hidePreNext(currentpage);                                    var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;                                    $.shownavigate(na);                                    }                            );                        }                    );                    //点击后退按钮                    $("#pagepre").click(                        function(){                            --currentpage<=0 && (currentpage=0);                            $.showPage(currentpage);                                $.removelight();                            $.lightnavigate($(navigates.get(currentpage)));                            $.hidePreNext(currentpage);                            var na = Math.floor(currentpage/options.navigatecount)*options.navigatecount;                            $.shownavigate(na);                            }                    );                    //点击前进按钮                    $("#pagenext").click(                        function(){                            ++currentpage>=pagecount-1 && (currentpage=pagecount-1);                            $.showPage(currentpage);                                $.removelight();                            $.lightnavigate($(navigates.get(currentpage)));                            $.hidePreNext(currentpage);                                                        var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;                            $.shownavigate(na);                            }                    );                    //点击首页按钮                    $("#pagefirst").click(                        function(){                            currentpage=0;                            $.showPage(currentpage);                                $.removelight();                            $.lightnavigate($(navigates.get(currentpage)));                            $.hidePreNext(currentpage);                                                        var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;                            $.shownavigate(na);                            }                    );                 //点击尾页按钮                 $("#pagelast").click(                         function(){                             currentpage=pagecount-1;                             $.showPage(currentpage);                                $.removelight();                            $.lightnavigate($(navigates.get(currentpage)));                            $.hidePreNext(currentpage);                                                        var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;                            $.shownavigate(na);                             }                 );                }        });    })(jQuery)

 

 

 

<html>        <head>        <link rel="stylesheet" type="text/css" href="style.css"/>         <script type="text/javascript" src="jquery-1.4.4.js">        </script>        <script type="text/javascript" src="jquery.easypage.js">        </script>        <script type="text/javascript">            //contentclass   要分页内容的class名称 默认的为contentlist            //navigateid         放置导航按钮的位置id 默认为mynavigate            //everycount          每页显示多少个            //navigatecount     导航按钮开始显示多少个,从第二个开始显示为双倍                $(                function(){                    $.easypage({contentclass:contentlist,navigateid:navigatediv,everycount:5,navigatecount:5});                    }            )        </script>        </head>            <body>        <div id="contents">            <div class="contentlist">1.美国宣布新军事战略将重心转向亚太地区</div>            <div class="contentlist">2.春运期间极端最低温达零下5度</div>            <div class="contentlist">3.上海妇女社会地位调查结果公布</div>            <div class="contentlist">4.暖手袋发生漏液有危险 </div>            <div class="contentlist">5.上海相关调查称新车内挥发性有机物严重超标</div>            <div class="contentlist">6.申城进入流感高发期</div>            <div class="contentlist">7.上海仍有部分幼儿园开设各类收费兴趣班 家长支持</div>            <div class="contentlist">8.达人秀将揭晓复赛阵容 洗碗工麻袋姐走改编路线</div>            <div class="contentlist">9.苹果侵权中国作家立案 韩寒等9人索赔1200万元</div>            <div class="contentlist">10.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)</div>            <div class="contentlist">11.石岚二村小区高空抛物现象严重 多辆轿车被砸</div>            <div class="contentlist">12.女子从11家银行申领24张信用卡 透支本金45万</div>            <div class="contentlist">13.松江一家化工厂发生爆炸 一名技术工人当场死亡</div>            <div class="contentlist">14.UPS公司内鬼组团集体犯罪侵占公司运费980多万元</div>            <div class="contentlist">15.奔驰车胎漏气监测不报警</div>            <div class="contentlist">16.CBA-新疆新援能否战JR 连败北京遇强敌</div>            <div class="contentlist">17.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰</div>            <div class="contentlist">18.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型</div>            <div class="contentlist">19.曼奇尼笑迎孙继海 英主力紧拥</div>            <div class="contentlist">20.冬运花滑庞清佟健复出夺冠 </div>            <div class="contentlist">21.中国彩票年销2214亿涨33%</div>            <div class="contentlist">22.双色球26注530万分落14省市</div>            <div class="contentlist">23.安全是根本 自主品牌C-NCAP碰撞评说</div>            <div class="contentlist">24.赏豪车买车尽在车型总汇</div>            <div class="contentlist">25.蔡澜:风情万种的日本版朱茵</div>            <div class="contentlist">26.微访谈:黄觉其实是个艺术家</div>            <div class="contentlist">27.杨澜访邓婕:当家庭主妇难</div>            <div class="contentlist">28.中学女生迎新“黑丝”上阵</div>            <div class="contentlist">29.陆空三军都干过的将军</div>        </div>        <br/><br/><br/>                <div id="navigatediv">                </div>        </body>    </html>    

 

 

.pagenavigate{        border:1 solid #78cdd1;        width:20px;        height:20px;        line-height:20px;        text-align:center;        background-color:#90d7ec;        float:left;        margin:0 2px;}.pagenext,.pagelast,.pagefirst,.pagepre{    border:1 solid #78cdd1;    width:40px;    height:20px;    line-height:20px;    text-align:center;    float:left;    margin:0 1px;}.pagenavigate a{        width:20px;        height:20px;        color:#fffef9;        background-color:#90d7ec;        text-decoration:none;}.pagenext a,.pagelast a,.pagefirst a,.pagepre a{    width:40px;    height:20px;    color:#009ad6;    font-size:12px;    text-decoration:none;    }#contents{    height:150px;    }.pagenavigateon{        border:1 solid #78cdd1;        width:20px;        height:20px;        line-height:20px;        text-align:center;        color:#ff0000!important;        background-color:#90d7ec;}.pagenavigateon a{        color:#ff0000;        text-decoration:none;}
var menuId = $( "ul.nav" ).first().attr( "id" );var request = $.ajax({  url: "script.php",  type: "POST",  data: { id : menuId },  dataType: "html"}); request.done(function( msg ) {  $( "#log" ).html( msg );}); request.fail(function( jqXHR, textStatus ) {  alert( "Request failed: " + textStatus );});

http://api.jquery.com/jQuery.ajax/

官网帮助文档