自己写的一个分页

pagination.js

;(function() 
{
    window.DelinPagination=function DelinPagination(totalPages,pageSize,pageNum){
        window.totalPages=(totalPages?totalPages:0)//总页数
        window.pageSize=(pageSize?pageSize:10);//每页显示几条
        window.pageNum=(pageNum?pageNum:1);//第几页
    }
    DelinPagination.prototype._packPageAjax=function(pageNum,IsFirst,AjaxFn){
        if(IsFirst){
            var str='<ul>'
            +'<li class="on">1</li>'
            for(var i=1;i<pageSize;i++){
                str+= '<li>'+(i+1)+'</li>'
            }
            str+= '</ul>'
            $('.pageList').html(str)
        }

        $('#span_pageNum').html(pageNum);
        $('#span_countPage').html(totalPages);
    }
    DelinPagination.prototype.pageDown=function(){
        console.log("下一页");
        var pageEnd=$('.pageList ul li').eq($('.pageList ul li').length-1).html()
        if(parseInt(pageEnd)>=totalPages){
            return false;
        }
        $('.pageList ul li').each(function(index,ele){
             if ( parseInt( $( ele ).html() ) + pageSize<=parseInt( totalPages )){
                        $( ele ).html( parseInt( $( ele ).html() ) + pageSize );
                    }
                    else
                    {
                        $( ele ).html( parseInt( $( ele ).html() ) + pageSize );
                        $( ele ).hide();
                    }
                $(ele).removeClass('on')

        })

        $('.pageList ul li').eq(0).addClass('on')
        var pageNum=$('.pageList ul li.on').html();
        this._packPageAjax(pageNum)
    }
    DelinPagination.prototype.pageUp=function(){
        console.log("上一页");
       if ( parseInt( $( '.pageList ul li.on' ).html() ) -pageSize <= 0 )
        {
                return false
       }
        console.log( "上一页" );
        $( '.pageList ul li' ).each( function ( index, ele )
        {
            $( ele ).removeClass( 'on' )
            $( ele ).show();
            var curPage = parseInt( $( ele ).html() ) - pageSize;
            if ( curPage < 1 )
            {
                return false
            }
            else
            {
                $( ele ).html( curPage );

            }

        } )
            $( '.pageList ul li' ).eq( 0 ).addClass( 'on' )
        var pageNum=$('.pageList ul li.on').html();
        console.log(pageNum);
        this._packPageAjax(pageNum)
    }
    DelinPagination.prototype.pageFirst=function(){
        console.log("上一页");
       $('.pageList ul li').each(function(index,ele){
            $(ele).show()
            var curPage=index+1;
            if(curPage<1){
                 return false
            }
            else{
                $(ele).html(curPage);
            }

        });
        $('.pageList ul li').removeClass('on');
        $('.pageList ul li').eq(0).addClass('on');
        var pageNum=$('.pageList ul li.on').html();
        // debugger
        console.log(pageNum);
        //加上请求数据地址
        _packPageAjax(pageNum);
        this._packPageAjax(pageNum)
    }
    DelinPagination.prototype.pageEnd=function(){
        $('.pageList ul li').each(function(index,ele){


            var IsHide=(totalPages<=parseInt($('.pageList ul li').eq(index-1).html()))
            if(IsHide){
                $(ele).hide()
            }
            var curPage=totalPages-(9-index);
            if(curPage<1){
                 return false
            }
            else{
                $(ele).html(curPage);
            }

        });
        $('.pageList ul li').removeClass('on');
        $('.pageList ul li').eq($('.pageList ul li').length-1).addClass('on');
        var pageNum=$('.pageList ul li.on').html();
        // debugger
        console.log(pageNum);

        this._packPageAjax(pageNum)
    }
})()

调用

$(function(){

    //总页数
    var totalPages=67;
    //每页显示的条数
    var pageSize=10;
    //开始发起ajax请求
    var pageNum=1;
     DelinPagination=new DelinPagination(67,10,1)

    _packPageAjax(pageNum,true);
    function _packPageAjax(pageNum,IsFirst){
            // $.ajax({
            //  url: '/path/to/file',
            //  type: 'default GET (Other values: POST)',
            //  dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
            //  data: {param1: 'value1'},
            //  success:function(data){

            //  },
            //  error:function(err){

            //  }
            // });
        if(IsFirst){
            var str='<ul>'
            +'<li class="on">1</li>'
            for(var i=1;i<pageSize;i++){
                str+= '<li>'+(i+1)+'</li>'
            }
            str+= '</ul>'
            $('.pageList').html(str)
        }

        $('#span_pageNum').html(pageNum);
        $('#span_countPage').html(totalPages);

    }
    $('.pageList ul li').click(function(){
        $('.pageList ul li').removeClass('on');
        $(this).addClass('on');
        //加上请求数据地址
        var pageNum=$(this).html();
        console.log(pageNum);
        _packPageAjax(pageNum);
    });
    //下一页
    $('.pageDown').click(function(){
        DelinPagination.pageDown();

    });
    //上一页
    $('.pageUp').click(function(){

        DelinPagination.pageUp();

    });
    //首页
    $('.pageFirst').click(function(){

    DelinPagination.pageFirst();

    });
    //末页  
    $('.pageEnd').click(function(){
        console.log("末页");

    });
})

HTML

    <div id="pageGro" class="cb">
<div class="pageFirst">首页</div>
<div class="pageUp">上一页</div>
    <div class="pageList">

    </div>
    <div class="pageDown">下一页</div>
    <div class="pageEnd">末页</div>
    <div class="pageSum">第<span id="span_pageNum"></span>页/ 共<span id="span_countPage"></span>页</div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值