使用jQuery的load事件实现分页

最新推荐文章于 2021-08-05 12:37:33 发布

努力努力再努力U

最新推荐文章于 2021-08-05 12:37:33 发布

阅读量550

点赞数 2

分类专栏：前台文章标签：前台后台交互分页实现

本文链接：https://blog.csdn.net/qq_42980244/article/details/93170468

版权

前台专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用jQuery的load事件实现分页

效果图，点击相应的页码能够进行跳转
在这里插入图片描述

由两个界面组成，表格是在大界面里用jquery的load事件load进来的
表格布局、页码显示用bootstrap框架的cssy样式
项目用了Springboot框架

关键来啦！

1）分页初始化（在大界面做）
—在实体类中编写PageBean实体类该类为分页实体
—大界面load小界面进来
访问大界面时用jquery的load方法将小界面（也就是你要做分页的数据放的一个jsp界面），在前台传一个curPage=1的信息给后台，

<script type="text/javascript">
		$(document).ready(function() {
			$("#maindiv").load("${path}/showfenye",{"curPage":1},function(){
			
			});
			
		});
	</script>

在后台的action中，用PageBean接收从前台传过来的curPage=1的信息
并调用service获取所有学生信息
Service的获取学生所有信息的方法中传入PageBean对象
在这个方法里面，对pagebean的其他属性设置值

public List<userbeanT> findalluser(PageBean pagebean) {
		// TODO Auto-generated method stub
		
		List<userbeanT> list  = usertmapper.findalluser();
		//设置总页数
		pagebean.setTotalCount(list.size());
		//设置一页显示多少个（7）
		pagebean.setPageCount(7);
		//设置总页数、开始下标、结束下标
		pagebean.initData();
		
		return list;
	}

这样就能完成分页的初始化（即访问大界面时已经对第一页也就是要显示的页的内容显示）
2）点击页码做跳转（在内嵌界面做）
—小界面关键html代码
关键1:就是每个页码 First << 1 2 3 4… >> Last 是一个a标签，并且，在javascript中对所有的a标签return false,给所有的A标签添加点击事件，获取当前点击的a标签的href属性的值，在#maindiv里面将href属性的值load进来。（你们可能会有疑问？#maindiv不是在大界面中吗？小界面怎么能够找得到id=maindiv的呢？因为js是运行在浏览器端的脚本，所以只要这两张界面在浏览器上显示成一界面，这个小界面就能够认得#maindiv）

 <div style="width:500px;margin:auto;">
   <center class="page-index-box" id="bottom">
	   <nav aria-label="Page navigation">
	   
		  <ul class="pagination">
		  <!-- 跳第一页 -->
		  	<li><a href="${path}/showdfenye?page=1">First</a></li>
		  	
 		  <!-- 跳前一页 -->		 
		    <li>
		      <a href="${path}/showdfenye?page=${pagebean.curPage==1?1:pagebean.curPage-1}" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		 
		 	   <c:forEach varStatus="sta"  end="${pagebean.totalPage}" var="i" begin="1" step="1">
				    	
				    	<li><a href="${path}/showdfenye?page=${i}">${i}</a></li>
				    	
			   </c:forEach>
		    	
		    	
		   <!-- 跳下一页 -->
		    <li>
		      <a href="${path}/showdfenye?page=${pagebean.curPage==pagebean.totalPage ? pagebean.totalPage : pagebean.curPage+1}" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		    
		     <!-- 跳最后一页 -->
		    <li><a href="${path}/showdfenye?page=${pagebean.totalPage}">Last</a></li>
		  </ul>
		  
		</nav>
		</center>
	</div>

—小界面关键js代码

<script type="text/javascript">
	
		$(document).ready(function() {
		
			$(".page-index-box a").click(function(){
			
				/*${path}/tstudentmsg/studentpage.action?page=1  
				修改PageBean的信息,请求重新转发到 学生信息界面
			    */
				//重新加载该界面
				var href = $(this).attr("href");
				//alert(href);
				
			
				$("#maindiv").load(href,function(){
					//让界面定位到 id为 bottom的 一个元素上
					window.location.hash = "bottom";
				}); 
				
				
				return false;
		
			});
			
		});
		
	</script>

关键2：每个a标签的href属性，都跳到了一个新的action，且带了一个叫做page的属性
点击某一个页码，页码对应的page属性就就会传给后台，后台用一个int page接收

@RequestMapping("showdfenye")   //@ModelAttribute("PageBean")PageBean pagebean从域对象中取出来
	public ModelAndView showdfenye(@ModelAttribute("pagebean")PageBean pagebean,int page,ModelMap modelmap) {
		
		System.out.println("1.点击取出来的"+pagebean);
		//从前台获取的页数
		System.out.println("2.点击页号的页数="+page);
		//重新给pagebean赋值
		pagebean.setCurPage(page);
		pagebean.initData();
		System.out.println("3.重新设置的pagebean"+pagebean);
		
		List<userbeanT> list = userServciceimpl.findalluser(pagebean);
		
		modelmap.addAttribute("pagebean", pagebean);
		return new ModelAndView("/test/fenye");
	}

@modelAttribute注解的作用是取出域对象，取出的域对象就是你之前放进去的页面初始化的pagebean,取出来对它重新赋值，再返回一个modelandview对象，继续把小界面返回到#maindiv

1.编写Teacher.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE HTML PUBLIC >
<html>
  <head>
   
    
    <title>学生信息界面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="${path }/js/jQuery-3.3.1.js" ></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#maindiv").load("${path}/showfenye",{"curPage":1},function(){
			
			});
			
		});
	</script>
	
  </head>
  
  <body>
   <div style="width:100%;height:300px;background-color: pink;"></div>
   <div id="maindiv">
   
   </div>
  </body>
</html>

2.entity层编写Pagebean实体类

package com.entity;

//分页实体
public class PageBean {

	//当前页
	private int curPage;	
	
	//总共数量
	private int totalCount;		//你要显示的总数量
	
	//总共页
	private int totalPage;		//totalCount%4==0?totalCount/4:totalCount/4+1;
	
	//一页数量
	private int pageCount;		//默认一页4本书
	
	//查询开始下标
	private int startIndex;		
	//查询结束下标
	private int endIndex;
	
	public PageBean() {
	}
	public PageBean(int curPage, int totalCount, int totalPage, int pageCount) {
		super();
		this.curPage = curPage;
		this.totalCount = totalCount;
		this.totalPage = totalPage;
		this.pageCount = pageCount;
	}
	public int getCurPage() {
		return curPage;
	}
	public void setCurPage(int curPage) {
		this.curPage = curPage;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getPageCount() {
		return pageCount;
	}
	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}

	public int getStartIndex() {
		return startIndex;
	}
	public void setStartIndex(int startIndex) {
		this.startIndex = startIndex;
	}
	public int getEndIndex() {
		return endIndex;
	}
	public void setEndIndex(int endIndex) {
		this.endIndex = endIndex;
	}
	@Override
	public String toString() {
		return "PageBean [curPage=" + curPage + ", totalCount=" + totalCount
				+ ", totalPage=" + totalPage + ", pageCount=" + pageCount
				+ ", startIndex=" + startIndex + ", endIndex=" + endIndex + "]";
	}
	
	public void initData() {
		
		//计算总页数
		//System.out.println("-----------"+totalCount/pageCount);
		totalPage = totalCount%pageCount==0?totalCount/pageCount:totalCount/pageCount+1;
		
		//计算开始下标
		startIndex=  (curPage-1)*pageCount;
		//计算结束下标
		if(curPage == totalPage){
			//如果是最后一页
			
			endIndex = totalCount;
		}else{
			//不是最后一页
			endIndex = startIndex + pageCount;		
		}
		
	}

	
	
	
	
	
}

3.controller层编写action

@Controller
@SessionAttributes(value={"pagebean","userList"})
public class IndexAction {
	
	@Resource
	private IUserServiceT userServciceimpl;
	
	
	/**
	 * 分页测试  小界面
	 */
	@RequestMapping("showfenye")
	public ModelAndView showfy(ModelMap moldelmap,PageBean pagebean) {
		
		//当前pagebean只有前台传过来的curPage=1的数据
		
		
		
		//从service 层获取学生信息,并且对pagebean设置属性
		List<userbeanT> list = userServciceimpl.findalluser(pagebean);
		System.out.println("初始"+pagebean);
		
		
		//将list添加到域对象中
		moldelmap.addAttribute("userList", list);
		moldelmap.addAttribute("pagebean", pagebean);
		
		return new ModelAndView("/test/fenye");
	}
	
	
	/**
	 * 显示Teacher.jsp界面
	 * @return
	 */
	@RequestMapping("showteacher")
	public ModelAndView showteacher() {
		
		
		
		return new ModelAndView("/test/Teacher");
	}
	
	@RequestMapping("showdfenye")   //@ModelAttribute("PageBean")PageBean pagebean从域对象中取出来
	public ModelAndView showdfenye(@ModelAttribute("pagebean")PageBean pagebean,int page,ModelMap modelmap) {
		
		System.out.println("1.点击取出来的"+pagebean);
		//从前台获取的页数
		System.out.println("2.点击页号的页数="+page);
		//重新给pagebean赋值
		pagebean.setCurPage(page);
		pagebean.initData();
		System.out.println("3.重新设置的pagebean"+pagebean);
		
		List<userbeanT> list = userServciceimpl.findalluser(pagebean);
		
		modelmap.addAttribute("pagebean", pagebean);
		return new ModelAndView("/test/fenye");
	}

}

4.service层调用dao层


@Service
public class UserServiceImpl implements IUserServiceT{
	
	@Resource
	private UserTmapper usertmapper;
	
	/**
	 * 返回所有学生信息
	 */
	@Override
	public List<userbeanT> findalluser(PageBean pagebean) {
		// TODO Auto-generated method stub
		
		List<userbeanT> list  = usertmapper.findalluser();
		//设置总页数
		pagebean.setTotalCount(list.size());
		//设置一页显示多少个（7）
		pagebean.setPageCount(7);
		//设置总页数、开始下标、结束下标
		pagebean.initData();
		
		return list;
	}

}

5.编写load进来的小界面（fenye.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>

<!DOCTYPE HTML PUBLIC >
<html>
  <head>
    
    
    <title>分页模块测试 -小</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="${path}/bootstrap/css/bootstrap.min.css">

	<script type="text/javascript">
	
		$(document).ready(function() {
		
			$(".page-index-box a").click(function(){
			
				
				//重新加载该界面
				var href = $(this).attr("href");
				//alert(href);
				
			
				$("#maindiv").load(href,function(){
					//让界面定位到 id为 bottom的 一个元素上
					window.location.hash = "bottom";
				}); 
				
				
				return false;
		
			});
			
		});
		
	</script>
  </head>
  
  <body>
   <table class="table table-hover" style="width:1000px;margin:auto;">
   	<thead>
   		<tr>
   			<th>编号</th><th>姓名</th><th>密码</th><th>昵称</th><th>电话</th><th>年龄</th>
   		</tr>
   	</thead>
   	<tbody>
   		<c:forEach items="${userList}" var="user" begin="${sessionScope.pagebean.startIndex }" end="${sessionScope.pagebean.endIndex }"> 
	   	<tr>
	   		<td>${user.u_id }</td>
	   		<td>${user.u_name }</td>
	   		<td>${user.u_password }</td>
	   		<td>${user.u_nickname }</td>
	   		<td>${user.u_tel }</td>
	   		<td>${user.u_age }</td>
	   	</tr>
	    </c:forEach>
   	</tbody>
   </table>
   
   <div style="width:500px;margin:auto;">
   <center class="page-index-box" id="bottom">
	   <nav aria-label="Page navigation">
	   
		  <ul class="pagination">
		  <!-- 跳第一页 -->
		  	<li><a href="${path}/showdfenye?page=1">First</a></li>
		  	
 		  <!-- 跳前一页 -->		 
		    <li>
		      <a href="${path}/showdfenye?page=${pagebean.curPage==1?1:pagebean.curPage-1}" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		 
		 	   <c:forEach varStatus="sta"  end="${pagebean.totalPage}" var="i" begin="1" step="1">
				    	
				    	<li><a href="${path}/showdfenye?page=${i}">${i}</a></li>
				    	
			   </c:forEach>
		    	
		    	
		   <!-- 跳下一页 -->
		    <li>
		      <a href="${path}/showdfenye?page=${pagebean.curPage==pagebean.totalPage ? pagebean.totalPage : pagebean.curPage+1}" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		    
		     <!-- 跳最后一页 -->
		    <li><a href="${path}/showdfenye?page=${pagebean.totalPage}">Last</a></li>
		  </ul>
		  
		</nav>
		</center>
	</div>
	
  </body>
</html>