首页 > 其他分享 >分页

分页

时间:2022-09-20 16:47:45浏览次数:49  
标签:totalPage pageNum 分页 pageIndex else pageUi active

//分页
$(document).on("click", ".pageBox>i", function () {
    //当前页数
    var activeDom = $(this).siblings(".pageFile").find(".active");
    var nowPage = activeDom.html() * 1;
    var allPage = activeDom.parents(".pageBox").attr("data-allPage") * 1;
    var pageNum = 0;
    if ($(this).attr("data-page") == "prev") {
        //上一页
        if (nowPage <= 1) { return false }
        pageNum = nowPage - 1;
        if (pageNum == (allPage - 1) && allPage > 10) {
            activeDom.siblings(".noPage").prev().addClass("active");
        } else {
            activeDom.prev().addClass("active");
        }
        activeDom.removeClass("active");
    } else {
        //下一页
        if (nowPage >= allPage) { return false; }
        activeDom.removeClass("active");
        pageNum = nowPage + 1;
        if (pageNum == allPage) {
            activeDom.siblings(".endPage").addClass("active");
        } else {
            activeDom.next().addClass("active");
        }
    }

    var funName = $(this).attr("data-revelation");
    window[funName](pageNum)
    //pageStyle();
})
$(document).on("click", ".pageFile span", function () {
    if ($(this).hasClass("active") || $(this).hasClass("noPage")) {
        return false;
    }
    $(this).siblings(".active").removeClass("active");
    $(this).addClass("active");
    var clickPage = $(this).attr("data-index");
    //点击页数
    var funName = $(this).parents(".pageBox").attr("data-pageFun");
    window[funName](clickPage);
    //pageStyle();
})

/**
 * 加载分页布局
 * @param {any} pageIndex 当前页
 * @param {any} totalPage 总页数
 * @param {any} totalCount 总行数
 */
function LoadPageHtml(pageIndex, totalPage, totalCount) {

    pageIndex = parseInt(pageIndex);
    totalPage = parseInt(totalPage);
    totalCount = parseInt(totalCount);

    var pageUi = "";
    $("#PageNum").html("");
    if (totalCount == 0 | totalPage == 0) {
        $("#PageNum").html("");
        $(".pageFileBox").addClass("hide");
        return false;
    }
    $("#reportCount").html(totalCount + "条");
    $("#PageIndexDiv").attr("data-allpage", totalPage);
    $(".pageFileBox").removeClass("hide");
    var i = 1;
    i = parseInt(i);
    if (totalPage <= 5) {//总页数小于五页,则加载所有页 
        for (i; i <= totalPage; i++) {
            if (i == pageIndex) {
                pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
            } else {
                pageUi += '<span class="" data-index="' + i + '">' + i + '</span>';
            }
        };
        $("#PageNum").html(pageUi);
        return false;
    } else if (totalPage > 5) {//总页数大于五页,则加载五页
        if (pageIndex < 5) {//当前页小于5,加载1-5页
            for (i; i <= 5; i++) {
                if (i == pageIndex) {
                    pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                } else {
                    pageUi += '<span class="" data-index="' + i + '">' + i + '</span>';
                }
            };
            if (pageIndex <= totalPage - 2) {//最后一页追加“...”代表省略的页
                pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';
            }
            pageUi += '<span class="" data-index="' + totalPage + '">' + totalPage + '</span>';
            $("#PageNum").html(pageUi);
            return false;
        } else if (pageIndex >= 5) {//当前页大于5页 
            for (i; i <= 2; i++) {//1,2页码始终显示
                pageUi += '<span data-index="' + i + '">' + i + '</span>';
            }
            pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';//2页码后面用...代替部分未显示的页码
            if (pageIndex + 1 == totalPage) {//当前页+1等于总页码(倒数第二页) 
                for (i = pageIndex - 3; i <= totalPage; i++) {//“...”后面跟三个页码当前页居中显示
                    if (i == pageIndex) {
                        pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                    } else {
                        pageUi += '<span data-index="' + i + '">' + i + '</span>';
                    }
                }
            } else if (pageIndex == totalPage) {//当前页数等于总页数则是最后一页页码显示在最后  
                for (i = pageIndex - 4; i <= totalPage; i++) {//...后面跟三个页码当前页居中显示
                    if (i == pageIndex) {
                        pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                    } else {
                        pageUi += '<span data-index="' + i + '">' + i + '</span>';
                    }
                }
            } else {//当前页小于总页数,则最后一页后面跟... 
                //4个一组
                if (pageIndex <= totalPage - 4) {
                    for (var i = pageIndex - 1; i <= (pageIndex + 3); i++) {
                        if (i == pageIndex) {
                            pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                        }
                        else {
                            pageUi += '<span data-index="' + i + '">' + i + '</span>';
                        }
                    }
                    if (pageIndex != totalPage - 4) {
                        if (pageIndex + 3 <= totalPage - 1) {
                            pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';
                        }
                    }
                } else {
                    for (var i = (totalPage - 4); i < totalPage; i++) {
                        if (i == pageIndex) {
                            pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                        }
                        else {
                            pageUi += '<span data-index="' + i + '">' + i + '</span>';
                        }
                    }
                }
                //最后一页
                pageUi += '<span data-index="' + totalPage + '">' + totalPage + '</span>';
            }
            $("#PageNum").html(pageUi);
            return false;
        }
    }
}

/**
* 上一页、下一页
* @param {any} pageNum
*/
function prevPage(pageNum) {
    g_curPage = pageNum;
    LoadDataByPage(g_curPage);
}

/**
 * 点击当前页
 * @param {any} pageNum
 */
function pageClick(pageNum) {
    g_curPage = pageNum;
    LoadDataByPage(g_curPage);
}

/**
 * 改变分页大小
 * @param {any} size
 */
function ChangePageSize(size) {
    if (size == 0) {
        size = $("#reportCount").attr("total");
    }
    g_pageSize = size;
    g_curPage = 1;
    LoadDataByPage(g_curPage);
}

 

标签:totalPage,pageNum,分页,pageIndex,else,pageUi,active
From: https://www.cnblogs.com/Ma-YuHao/p/16711562.html

相关文章

  • vue分页点到第一页和最后一页时如何提示
    点击上一页的时候我们判断页码是否小于1,如果小于1了,就弹出提示,再给它加1,然后returnthis.queryParams.pageNum=this.queryParams.pageNum-1 if(this.queryParams.p......
  • flask升序降序,分页,序列化器
    classUserInfoView(Resource):#@marshal_with(field)defget(self):#daming=User('daming',40,None)#xiaoming=User('xiaoming',16,damin......
  • 自定义分页功能的实现
    <viewclass="btm"><viewclass="elpage"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"......
  • 对list集合进行分页
    方法一:@Testpublicvoidtest02(){List<Integer>list=Arrays.asList(1,2,3,4,5,6,7,8,9);inttotalPage=0;intpageS......
  • mybatis-plus分页失效原因
    mybatis-plus分页失效原因一、在启动类添加如下配置@SpringBootApplication@MapperScan("com.**.mapper")publicclassDemoApplication{publicstaticvoidma......
  • DataTable中数据记录的排序,检索,合并,分页,统计(整理)(转)
    一、排序1获取DataTable的默认视图2对视图设置排序表达式3用排序后的视图导出的新DataTable替换就DataTable(Asc升序可省略,多列排序用","隔开)DataViewdv=dt.Default......
  • es批量分页导入数据
    es批量分页导入数据pojo类:(将时间类的加上注解)service层:(注意的是查找器无条件,就是查找所有,发送请求是最后发送)修改:2022.09.19page是从页数1开始@Servicep......
  • .Net下的高效分页
    本文技术方案支持.Net/.NetCore/.NetFramework 数据分页,几乎是任何应用系统的必备功能。但当数据量较大时,分页操作的效率就会变得很低。大数据量分页时,一个操作耗时5秒......
  • LIMIT和OFFSET分页性能差!今天来介绍如何高性能分页
    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源。GreatSQL是MySQL的国产分支版本,使用上与MySQL一致。前言之前的大多数人分页采用的都是这样:SE......
  • 分页查询,redis缓存分页数据,redis双重检测
    StringpageKey=RedisKeyManagement.getKey(RedisKeyManagement.ACTIVITY_BAISHI_PAGE_CACHE,Arrays.asList(activityId.toString(),String.valueOf(current)));......