zoukankan      html  css  js  c++  java
  • 自己实现的ajax分页js

    /**
     * 分页
     * @author chenqionghe
     * @param data  json数据,包含totalPage,count
     * @param page  获取的页数
     * @param obj   表格中的对象
     * @param funcName  页码点击跳转的函数名,默认为showPage
     * @constructor
     */
    function Page(data,page,obj,funcName)
    {
        var funcName = arguments[3] ? arguments[3] : 'showPage';
        this.totalPage = data.totalPage;    //总页数
        this.count = data.count;            //总记录数
        this.per = data.per;                //每页显示多少条
        this.nowPage = page;                //当前页码
        this.per_choose = [5,10,20,50,100];   //每页提供选择显示条数
        this.pageStr = function ()
        {
            if(this.count == 0)
            {
                return '<tr><td  class="pageStr" colspan="'+$(obj).closest('table').find('th').length+'"><span class="rows">没有数据可供显示</span></td></tr>';
            }
            //根据总的记录数,循环构造翻页字符串
            var rollPage = 5;//设置每页显示的提供点击的页数
            var offset = Math.ceil((rollPage / 2));
            var pageStr = '<tr><td  class="pageStr" colspan="'+$(obj).closest('table').find('th').length+'">';
    
            pageStr +='每页显示<select onchange="'+funcName+'(1,this,this.value)">';
            $.each(this.per_choose,function(k,v){
                var selected = (data.per == v)? 'selected="selected"' : '';
                pageStr += '<option '+selected+' value="'+v+'">'+v+'</option>';
            });
            pageStr += '</select>  '
    
            pageStr += '<a href="javascript:void(0);" class="first" onclick="'+funcName+'(1,this,'+this.per+')">首页</a>';
            pageStr += '<span class="rows">共 '+this.count+' 条记录</span>';
            pageStr += ' <span class="rows">第'+this.nowPage+'页 </span>';
            if(this.totalPage>offset && this.nowPage>offset)
                pageStr += '<a href="javascript:void(0);" class="first" onclick="'+funcName+'(1,this,'+this.per+')">首页</a>';
            if(this.nowPage > 1)
                pageStr += '<a href="javascript:void(0);" class="prev" onclick="'+funcName+'('+(this.nowPage-1)+',this,'+this.per+')">上一页</a>';
            var p;  //字符页码
            for(var i=1; i<=rollPage; i++)
            {
                if(this.nowPage < offset)
                    p = i;
                else if(this.nowPage + offset > this.totalPage)
                    p = this.totalPage-offset+i;
                else
                    p = this.nowPage-offset+i;
                //拼接字符串
                if(p > 0 && p != this.nowPage)
                    if(p <= this.totalPage)
                        pageStr += '<a href="javascript:void(0);" class="num" onclick="'+funcName+'('+p+',this,'+this.per+')">'+p+'</a>';
                    else
                        break;
                else
                {
                    if(this.nowPage > 0 && this.totalPage != 1)
                        pageStr += '<a class="current" >'+p+'</a>';
                }
    
            }
            if(this.nowPage < this.totalPage)
                pageStr += '<a href="javascript:void(0);" class="next" onclick="'+funcName+'('+(this.nowPage+1)+',this,'+this.per+')">下一页</a>';
            if(this.totalPage>offset && (this.nowPage+offset)<this.totalPage)
                pageStr += '<a href="javascript:void(0);" class="end" onclick="'+funcName+'('+this.totalPage+',this,'+this.per+')">尾页</a>';
            pageStr += '  <span class="rows">共'+this.totalPage+'页</span> ';
            pageStr += '</td></tr>';
            return pageStr;
        }
    }
    
  • 相关阅读:
    [NOI Online 2021 提高组] 愤怒的小 N
    CF1474F 1 2 3 4 ...
    CF1466H Finding satisfactory solutions
    CF1336F Journey
    [PKUSC2021]代金券
    如何科学地设计对拍随机种子
    CF1168E Xor Permutations
    「JOISC 2019 Day2」两种运输
    springboot json参数
    springboot整合webserver应用
  • 原文地址:https://www.cnblogs.com/chenqionghe/p/4456821.html
Copyright © 2011-2022 走看看