js实现分页功能

最新推荐文章于 2024-07-01 11:34:43 发布

三木来啦

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量2.4k

点赞数 1

分类专栏： js 文章标签： java 分页 javascript

本文链接：https://blog.csdn.net/wang873985264/article/details/72675899

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文仅为自己记录下编写过程，如有兴趣，或者疑问，请与我联系。

写前背景:java开发工作经验一年，现项目为SSM框架，使用maven管理项目。需要页面查询实现分页，网上找了很多插件，单独页面实现是好的，可是放到我的页面就没有效果，苦于自己也找不到原因，故写以下代码，很是粗糙，不过懒得整理成js文件了。。。

效果：第一页时，首页和上一页为不可点击，最后一页时，下一页和尾页不可点击，页数只会显示5个

这里写图片描述

实现的js:

//分页function
$(document).ready(function(){
    //获取分页数
    var talPage = ${countPage};
    //获取当前页数
    var pageIndex = ${pageIndex};
    var ul = document.getElementById("getPage");
    document.getElementById("getPage").innerHTML="";
    var li_0 = document.createElement("li");
    li_0.innerHTML = "总共："+${count}+"条，共："+${countPage }+"页，每页：10条";
    ul.appendChild(li_0);
    if(talPage==1 || pageIndex == 1){//第一页首页和上一页不可操作
        var li_1 = document.createElement("li");
        li_1.setAttribute("class","pageItemDisable bt4");
        li_1.setAttribute("onclick","pageClick(this)")
        li_1.innerHTML = "首页";
        ul.appendChild(li_1);
        var li_2 = document.createElement("li");
        li_2.setAttribute("class","pageItemDisable bt4");
        li_2.setAttribute("onclick","pageClick(this)")
        li_2.innerHTML = "上一页"
        ul.appendChild(li_2);
    }else{
        var li_1 = document.createElement("li");
        li_1.setAttribute("class","pageItem bt4");
        li_1.setAttribute("onclick","pageClick(this)")
        li_1.innerHTML = "首页";
        ul.appendChild(li_1);
        var li_2 = document.createElement("li");
        li_2.setAttribute("class","pageItem bt4");
        li_2.setAttribute("onclick","pageClick(this)")
        li_2.innerHTML = "上一页"
        ul.appendChild(li_2);
    }
    //之前需要将，上一页创建出来
    if(talPage<=5){
        //总页数在0到5之间时，显示实际的页数
        for(var i=0;i<talPage;i++){
            if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
                var li = document.createElement("li");
                li.setAttribute("class","pageItemActive");
                li.setAttribute("onclick","pageClick(this)")
                li.innerHTML = i+1;
                ul.appendChild(li);
            }else{
                var li = document.createElement("li");
                li.setAttribute("class","pageItem");
                li.setAttribute("onclick","pageClick(this)")
                li.innerHTML = i+1;
                ul.appendChild(li);
            }

        }
    }else if(talPage>5){
        //总页数大于5时，只显示五页，多出的隐藏
        //判断当前页的位置
        if(pageIndex<=3){//当前页小于等于3时，显示1-5
            for(var i=0;i<5;i++){
                if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItemActive");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }else{
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItem");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }
            }
        }else if(pageIndex>talPage-5){//当前页为最后五页时
            for(var i=talPage-5;i<talPage;i++){
                if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItemActive");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }else{
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItem");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }
            }
        }else{//当前页为中间时
            for(var i=pageIndex-3;i<pageIndex+2;i++){
                if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItemActive");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }else{
                    var li = document.createElement("li");
                    li.setAttribute("class","pageItem");
                    li.setAttribute("onclick","pageClick(this)")
                    li.innerHTML = i+1;
                    ul.appendChild(li);
                }
            }   
        }
    }
    if(pageIndex == talPage){//当前页为最大页时，下一个和尾页不可操作
        var li_3 = document.createElement("li");
        li_3.setAttribute("class","pageItemDisable bt4");
        li_3.setAttribute("onclick","pageClick(this)")
        li_3.innerHTML = "下一页"
        ul.appendChild(li_3);
        var li_4 = document.createElement("li");
        li_4.setAttribute("class","pageItemDisable bt4");
        li_4.setAttribute("onclick","pageClick(this)")
        li_4.innerHTML = "尾页"
        ul.appendChild(li_4);
    }else{
        var li_3 = document.createElement("li");
        li_3.setAttribute("class","pageItem bt4");
        li_3.setAttribute("onclick","pageClick(this)")
        li_3.innerHTML = "下一页"
        ul.appendChild(li_3);
        var li_4 = document.createElement("li");
        li_4.setAttribute("class","pageItem bt4");
        li_4.setAttribute("onclick","pageClick(this)")
        li_4.innerHTML = "尾页"
        ul.appendChild(li_4);
    }
    if(0 == talPage){//一页都没有时，将首页，上一页，下一个，尾页都置为不可操作
            $(".bt4").removeClass("pageItem");
            $(".bt4").addClass("pageItemDisable");
    }

});
//分页的按钮的点击事件
function pageClick(obj){
    var talPage = ${countPage};//总页数
    var pageIndex = ${pageIndex};//当前页数
    var text = obj.innerText;//点击标签的值
    var url = "<%=path%>/service/getServiceList.action";
    //如果为不可操作的直接返回false
     if($(obj).attr("class").indexOf("pageItemDisable")>=0){
        return false;
    } 
    with(document.forms["serviceForm"]){
        if("首页" == text){
            action = url;

        }else if("上一页" == text){
            //计算出上一页到底是第几页
            //第一种方法，获取当前li中class为pageItemActive的标签，取其值
            //第二种方法，直接el   ${pageIndex}获取当前页数，然后-1
            //var a = $(obj).parent().children("pageItemActive").html();
            //如果当前页是1，不-,地址和首页相同
            if(pageIndex <= 1){
                action = url;           
            }else{
                action = url+"?pageIndex="+(pageIndex-1);
            }
        }else if("下一页" == text){
            //如果当前页为尾页，则下一页为尾页，url跟当前url一样
            if(pageIndex == talPage){
                action = url;
            }else{
                action = url+"?pageIndex="+(pageIndex+1);
            }
        }else if("尾页" == text){
            //如果当前页为尾页，则url不变
            if(pageIndex == talPage){
                action = url;
            }else{
                action = url+"?pageIndex="+talPage;
            }
        }else{
            //点击页数时
            action = url+"?pageIndex="+text;

        }
        submit();
    }

}

页面元素：

<ul id="getPage" class="page" style="list-style-type:none;"></ul>

所用到的css样式：

<style type="text/css">
    <!-- 分页处的样式 -->
    .page{
    list-style: none;
}
.page>li{
    float: left;
    padding: 5px 10px;
    cursor: pointer;
}
.page .pageItem{
    border: solid thin #DDDDDD;
    margin: 5px;
}
.page .pageItemActive{
    border: solid thin #0099FF;
    margin: 5px;
    background-color: #0099FF;
    color:white;
}
.page .pageItem:hover{
    border: solid thin #0099FF;
    background-color: #0099FF;
    color:white;
}
.page .pageItemDisable{
    border: solid thin #DDDDDD;
    margin: 5px;
    background-color: #DDDDDD;
}

</style>

java中处理：

//获取当前页
            String pageIndex = "1";//默认为第一页
            if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){
                pageIndex = (String)request.getParameter("pageIndex");
            }
            //最后需要将当前页返回给前台，用于样式的展示
            request.setAttribute("pageIndex", pageIndex);
            //一顿计算。。。。,取得startNum,endNum
            String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1);
            String endNum = Integer.toString(Integer.parseInt(startNum)+9);
            //根据条件查询
            List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum);
            //查询出总数，用作分页
            Integer serviceCount = serviceServiceImpl.getServiceCount(service);
            request.setAttribute("count",serviceCount);//总数
            Integer countPage = serviceCount/10;
            if((serviceCount/10.0-serviceCount/10)>0){//有小数，总页数+1
                countPage = countPage+1;
            }
            request.setAttribute("countPage",countPage);//总页数