欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

1024程序员节

程序员文章站 2022-04-28 18:31:04
...

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;
}