1024程序员节

springboot项目实现分页功能的Java代码

实现页面跳转前的几个属性得有
当前页面，共多少页，点击上一页当前页数减1如果当前页是1则点击页面不发生跳转，如果点击下一页按钮，当前页加1,若加1后的页数大于总页数则页面不发生跳转。主页面6篇文章为一页
我用的跳转方法可能不够简单，但都是最基础的东西，适合于初学者，大佬就可以忽略掉了

 /*页面跳转*/
    /*在form表单提交时需要postmapping*/
    /*pageindex为要跳转的页*/
    @PostMapping("/jump")
    public String pageJump(Model model, int pageindex,HttpSession session) {
        Integer typeIdForJump = (Integer)session.getAttribute("typeIdForJump");
        List<Article> allTitle;
        int size=0;
        //实现不同类型的文章也能进行页面跳转
        if (typeIdForJump!=1 && typeIdForJump!=2 &&typeIdForJump!=3 &&typeIdForJump!=4 &&typeIdForJump!=1 &&typeIdForJump!=5 &&typeIdForJump!=6 &&typeIdForJump!=7){
            allTitle = articleMapper.getAllTitle();
            size = allTitle.size();
        }else {
            allTitle = articleMapper.functionJump(typeIdForJump);
        }
        /*总共的文章数*/

        int page=0;
        /*总页数：每六篇文章为1页*/
        if(size>6){
          page = (size/6)+1;
        }else {
            page=1;
        }
        /*传当前页数，文章总数、总页数*/
        model.addAttribute("pageindex",pageindex);
        model.addAttribute("ariticlenum", size);
        model.addAttribute("page", page);

        int startNum=(pageindex*6)-6;
        int endNum=0;
        List<Article> nowarticles;
        //假设总共4页，如果要跳到第4页，则第4页的文章数小于6
        if (pageindex==page){
            int theEndArticleNum= size%6;
            endNum=startNum+theEndArticleNum;
            nowarticles= allTitle.subList(startNum, endNum);
            model.addAttribute("articles",nowarticles);
            return "main";
        }
            endNum=startNum+6;
            nowarticles= allTitle.subList(startNum, endNum);
            model.addAttribute("articles",nowarticles);
            return "main";
        }

分页main.html

 <!--分页-->
        <div class="page">
            <table cellspacing="0" class="page-box">
                <tr>
                    <th >
                        当前共<span id="ariticleNum" th:text="${ariticlenum}">0</span>篇文章
                    </th>
                    <th>
                        共<span id="totalPage" th:text="${page}">1</span>页
                    </th>
                    <th>
                        目前所处第<span id="nowpage" th:text="${pageindex}">1</span>页
                    </th>
                    <th>
                        <form method="post" th:src="@{/article/jump}" action="/article/jump" οnsubmit=" return check(1)">
                            <input type="text" hidden name="pageindex" value="1" id="lastPage">
                            <input type="submit" value="上一页"/>
                        </form>
                    </th>
                    <th>
                        <form method="post" th:action="@{/article/jump}" action="/article/jump" οnsubmit=" return check(2)">
                            <input type="text" hidden name="pageindex" id="nextPage" value="1">
                            <input type="submit" value="下一页"  />
                        </form>
                    </th>
                    <th>
                        <form method="post" action="/article/jump" th:action="@{/article/jump}" οnsubmit="return check(3)">
                            <input type="submit" value="点击跳转">第
                            <input type="text" class="pageindex" value="1" name="pageindex" id="anoyPage">页
                        </form>
                    </th>
                </tr>
            </table>
        </div>
    </div>

分页CSS

/*分页*/
.page{
    margin-top: 20px;
    margin-left: 20px;
    color: wheat;
}
.page table{
    width: 900px;
    height: 30px;
}
.pageindex{
    width: 50px;
}
.page-box{
    width: 70%;
    height: 30px;
}

分页JS

function check(num) {
    /*注意区别=和==
* 在数据类型未定时与一个数相加时可能认为是拼接，所以先进行数据类型转换
* */
    //总页数
    var totalPage = parseInt(document.getElementById("totalPage").innerText);
    //目前所处页数
    var nowpage = parseInt(document.getElementById("nowpage").innerText);
    //文章数
    var ariticleNum = parseInt(document.getElementById("ariticleNum").innerText);
    //上一页
    if(num==1){
        //点击上一页，如果该页为第一页就不能再上一页
        if(nowpage-1 > 0){
            document.getElementById("lastPage").value=nowpage-1;
            return true;
        }
        return false;
        //下一页
    }else if (num==2){
        //如果该页为跳转后的页数大于总页数，则不能跳转
        if (nowpage+1 <= totalPage){
            document.getElementById("nextPage").value=nowpage+1;
            return true;
        }
        return false;
    }
    //如果输入的内容不是数字也不能进行跳转
    var jumpdirectly = document.getElementById("anoyPage").value;
    var r = /^\+?[1-9][0-9]*$/;
    var flag=r.test(jumpdirectly);
    if (flag==true){
        if (jumpdirectly>0 && jumpdirectly <= totalPage){
            return true;
        }else {
            return false;
        }
        return true;
    }
    return false;
}