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