ajax实现异步查询记录与分页

最新推荐文章于 2021-08-05 23:09:21 发布
最新推荐文章于 2021-08-05 23:09:21 发布
阅读量309 收藏
点赞数 1
分类专栏： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43011185/article/details/97949056
版权

前端代码

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var Allcount=0;
	var allNum=0;
	var ALLPAGE=0;
function query(begin, num){
	$("#info").empty();
	num=$("#num").val();
	allNum=num;
	$.ajax({
		  url: "/mybatis_first_demo2/queryAllStudentServlet", 
          type: 'POST',  
          data: "begin="+begin+"&num="+num,  
          dataType: 'json',  
          success:function(json){
        	
        	var count=json[0].count
        		$("#info").append("<tr><th>姓名</th><th>性别</th><th>密码</th><th>学院</th><th>班级</th><th>电话</th></tr>");
        	  for(var i=1;i<json.length;i++){
        		
    				$("#info").append("<tr><td>"+json[i].name+"</td><td>"+json[i].sex+"</td><td>"+json[i].password+"</td><td>"+json[i].school+"</td><td>"+json[i].major+"</td><td>"+json[i].phone+"</td></tr>");
        	//	  $("#"+"major"+i.toString()).html(json[i].major);
        	//	  $("#"+"name"+i.toString()).html(json[i].name);
        	//	  $("#"+"password"+i.toString()).html(json[i].password);
        	//	  $("#"+"phone"+i.toString()).html(json[i].phone);
        	//	  $("#"+"school"+i.toString()).html(json[i].school);
        	//	  $("#"+"sex"+i.toString()).html(json[i].sex);
        	  }
        	$("#count").html(count);
   
        	$("#nowpage").html(begin);
        	//显示当前页数，因为begin默认为一，所以，第一次查询当前页都是一
        	

        	console.log(num);
      //设置总页数。当总数除以每页的记录数的时候，如果余数不为零，说明最后一页的记录数的条数是余数，我们要增加一页来放置剩下来的记录
	 //     这种情况包含两种情况，当总记录数小于每页的记录的时候，不能被整除，余数为总记录数。这个时候页数为一页，不能为零
    //  第二张情况是总记录数大于每页记录，但不能被整除，一样需要增加一页
        	var num2=Number(num);
        	var count2=Number(count);
        	Allcount=count2;
        	var page=0;
        	if(count2%num2!==0){
        		
        		page=(count2/num2)+1;
        	

        	}else{
        		page=count2/num2;
        	
        	}
        	
        	
        	
  
        	//当下一页的按钮隐蔽之后，点击页数的查找记录时候，如果不是小于最后一页，激活按钮
        	numbegin=Number(begin);
        	if(numbegin<parseInt(Number(page))){
        		$("#nextpage").show();
        	}else{
        		$("#nextpage").hide();
        	}
        	
        	
        	//激活上一页——如果当前页不是第一页，则显示按钮，否则显示按钮
        	if(numbegin!=1){
        		$("#prepage").show();
        	}else{
        		$("#prepage").hide();
        	}
   
        	console.log(page);
        	
        	ALLPAGE=page;
        		$("#page").empty();
        		//当每一页的记录数目发生变化的时候，我们可以调整页码，在调整之前，要对之前的页数进行清除
        	
        		//显示当前页数
        	for(var j=1;j<=page;j++){
        		$("#page").append("<td><button onclick=topage("+j+")>第"+j+"页</button></td>");
        	}
        	  
          },
	 error:function(){
        	  console.log("error");
          }
          
	})
	
	
};
//跳转到对应的页数
			function topage(page){
			
				$("#page").empty();
				var num=$("#num").val();
				query(page,num);
				$("#nowpage").html(page);
				
			};
//跳转到下一页			
			function nextpage(){
				//console.log($("#nowpage").text());
				var nowpage=Number($("#nowpage").text());
				var nextpage=nowpage+1;
				console.log(ALLPAGE);
			//	var a = 160.58;
			//	var b = parseInt(a);//截取整数部分
			//	alert(b);
			//	//或者
			//	var c= Math.round(a);//四舍五入
			//	alert(c);
				
				//if(nextpage==parseInt(ALLPAGE)){
				//	$("#nextpage").hide();
				//}
				topage(nextpage.toString());
			};
	//跳转到上一页		
			function prepage(){
				var nowpage=Number($("#nowpage").text());
				
			//	if(nowpage==1){
			//		$("#prepage").hide();
			//	}else{
					topage((nowpage-1).toString());
			//	}
			}
		
</script>

html代码

<body>
<table id=info></table>
<table id=input>
<tr>共有<td id=count></td>条记录<td>当前页</td><td id=nowpage></td><td>每页</td><td><input id=num value=10 /></td><td>条记录</td><td><button onclick="query(1,10)">查询</button></td></tr>
<tr><td></td></tr>
<tr id=page></tr>
</table>
<button id=nextpage onclick="nextpage()") hidden='true'>下一页</button>
<button id=prepage onclick="prepage()") hidden='true'>上一页</button>
</body>

这里有一个小技巧，上一页和下一页默认是隐藏的，因为考虑到还没有查询记录的时候，没有下一页和下一页，而且考虑到跳转页面的方式有两种，一种是直接按页数按钮，跳转到相应的页面，另一种是通过点击写一页和上一页的按钮来跳转到对应的页数。但是把两种情况分开来考虑的话，上一页和下一页的按钮隐藏的时候，需要重复写。注意到一点就是，两种跳转方式都需要条用query方法，所以我们在query方法中写一次代码即可，代码如下：

下一页按钮效果

if(numbegin<parseInt(Number(page))){
        		$("#nextpage").show();
        	}else{
        		$("#nextpage").hide();
        	}

代码解释如下：
当需要跳转的页数小于总页数的时候，下一页按钮现实，当跳转页数大于或等于总页数的时候则隐藏。

上一页按钮效果

if(numbegin!=1){
        		$("#prepage").show();
        	}else{
        		$("#prepage").hide();
        	}

上一页的代码也一样。当页数为第一页的时候，没有上一页可以跳转，所以需要隐藏。当页数大于1的时候，可以现实

后端代码

后端代码最重要的是需要获取每页的记录条数和从哪里开始查找记录，从哪里开始查找和每页的条数都是用于分页的

具体的思路如下：首先要获取总记录数。用总记录数除以每页的记录数，当结果不能被整除的时候需要加一页，给剩下的记录。但能过内整除的时候，总的页数刚好为结果，无需另外加页数。

页数分好了，那么，当跳转页数的时候，我们如何从数据库获取。我们需要用到一个很好用的sql代码

<select id="queryAllStudent"  resultType="com.mialab.mybatis_first_demo.domain.Student">
	SELECT * FROM team LIMIT #{num} OFFSET #{begin}
	</select>

LIMIT 的意思是每一次最多查找这么多条
offset的意思是从指定的位置的下一个记录开始获取记录
例如LIMIT 10 OFFSET 10 意思是从11开始获取10条纪录，如果后面为空，则停止

我们在查找记录的时候页数分情况考虑的，当第一次查找记录的时候，页数为一，我们需要把begin值为0，才能把第一条记录读取，否则为1的话，会跳过1，从第二条开始读取；但页数大于1的时候，开始的位置为页数-1乘以每条记录数。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int begin=Integer.parseInt((String)request.getParameter("begin"));
		System.out.println(begin);
		
		int num=Integer.parseInt((String)request.getParameter("num"));
		System.out.println(num);
		int count=0;
//		Student count1=new Student(String.valueOf(count),"sex","num","kk","ss","99");
		
//		count1.setName(String.valueOf(count));
		SqlSession sqlSession=null;
		DataConnection connection=new DataConnection();
		try {
			sqlSession=connection.getSession();
			TextMapper mapper=connection.getMapper(sqlSession);
			count=mapper.getNumStudent();
			Count count1=new Count(count);
			String jsonCount = JSON.toJSONString(count1); 
//			sqlSession.commit();
			int page=count/num;
			System.out.println(page);
			List<Student>students=new ArrayList<shareText>();
			if(page<1) {
			//
					if(begin==1){
							students=mapper.queryAllStudent(0, count);
							sqlSession.commit();
					} else{
//总记录只有一页，当点击加载更多的时候，begin+1 ，已经没有记录了，所以无需再查询

				}
				
//					request.setAttribute("students", students);
//					List<Count>counts=new ArrayList<Count>();
//					counts.add(count1);
					String jsonString = JSON.toJSONString(students);  
//					String jsonString2 = JSON.toJSONString(counts);  
					response.setCharacterEncoding("UTF-8");  
					response.setContentType("application/json; charset=utf-8");  
					PrintWriter writer = response.getWriter();
					String jsonString3=jsonString.substring(1);
					String aString="["+jsonCount+","+jsonString3;
					writer.append(aString);
					writer.close();
				
				
				
			}else {
				//总记录大于一页的时候，第一次查询的时候，begin为1，1-1=0，所以也是从零开始查，当begin大于一的时候，则从上次查询的最后一条的记录开始查询，注意读取的时候，要+1，即从其吓一跳记录开始读取数据。
				
					System.out.println("herebbbb");
						students=mapper.queryAllStudent(num*(begin-1),num);
						sqlSession.commit();
//						request.setAttribute("students", students);
						String jsonString = JSON.toJSONString(students);  
						response.setCharacterEncoding("UTF-8");  
						response.setContentType("application/json; charset=utf-8");  
						PrintWriter writer = response.getWriter();
						String jsonString3=jsonString.substring(1);
						String aString="["+jsonCount+","+jsonString3;
						writer.append(aString);
						writer.close();
					
				}
				

			}
		
			
		}catch (Exception e) {
			// TODO: handle exception
		}
		finally {
			if(sqlSession!=null) {
				sqlSession.close();
			}
		}
		
//		int page=count/num;
//		System.out.println(page);
//		if(page<1) {
//			try {
//				sqlSession=connection.getSession();
//				TextMapper mapper=connection.getMapper(sqlSession);
//				List<Student>students=mapper.queryAllStudent(1, count);
//				sqlSession.commit();
				request.setAttribute("students", students);
//				
//				String jsonString = JSON.toJSONString(students);  
//				response.setCharacterEncoding("UTF-8");  
//				response.setContentType("application/json; charset=utf-8");  
//				PrintWriter writer = response.getWriter();
//				writer.append(jsonString);
//				writer.close();
//			}catch (Exception e) {
//				// TODO: handle exception
//			}
//			
//			finally {
//				if(sqlSession!=null) {
//					sqlSession.close();
//				}
//			}
//			
//			
//		}else {
//			
//			if(begin==1) {
//				
//				try {
//					sqlSession=connection.getSession();
//					TextMapper mapper=connection.getMapper(sqlSession);
//					List<Student>students=mapper.queryAllStudent(1, num);
//					sqlSession.commit();
					request.setAttribute("students", students);
//					String jsonString = JSON.toJSONString(students);  
//					response.setCharacterEncoding("UTF-8");  
//					response.setContentType("application/json; charset=utf-8");  
//					PrintWriter writer = response.getWriter();
//					writer.append(jsonString);
//					writer.close();
//				}catch (Exception e) {
//					// TODO: handle exception
//				}
//				
//				finally {
//					if(sqlSession!=null) {
//						sqlSession.close();
//					}
//				}
//				
//				
//				
//			}else {
//				try {
//					sqlSession=connection.getSession();
//					TextMapper mapper=connection.getMapper(sqlSession);
//					List<Student>students=mapper.queryAllStudent(num*(begin-1),num);
//					sqlSession.commit();
					request.setAttribute("students", students);
//					String jsonString = JSON.toJSONString(students);  
//					response.setCharacterEncoding("UTF-8");  
//					response.setContentType("application/json; charset=utf-8");  
//					PrintWriter writer = response.getWriter();
//					writer.append(jsonString);
//					writer.close();
//				}catch (Exception e) {
//					// TODO: handle exception
//				}
//				
//				finally {
//					if(sqlSession!=null) {
//						sqlSession.close();
//					}
//				}
//			}
//			
//			
//			
//			
//		}
//		
		
		
		
		
	}

这里还有一个小技巧就是，返回数据中，对应的记录包装成list对象的json，但我们不仅需要把记录返回去，还需要把总记录数返回去，这个时候需要在记录的json块增加总记录，我们只需要把json字符串拆开，然后在头部加一条json即可。方法如下
利用sustring方法，把json串左边的“[”去掉。然后去掉该字符串的前面插入
“[”+jsonCount+","+jsonString3;即可完成把记录数返回去

Count count1=new Count(count);
String jsonCount = JSON.toJSONString(count1); 

	List<Student>students=mapper.queryAllStudent(num*(begin-1),num);
						sqlSession.commit();
						String jsonString = JSON.toJSONString(students);  
						response.setCharacterEncoding("UTF-8");  
						response.setContentType("application/json; charset=utf-8");  
						PrintWriter writer = response.getWriter();
						String jsonString3=jsonString.substring(1);
						String aString="["+jsonCount+","+jsonString3;
						writer.append(aString);
						writer.close();

如果错误，欢迎指出

爱喝酸奶的一旬
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX异步分页查询
qq_35199832的博客
02-03 293
跳转页面(不请求数据) @RequestMapping("/list") public String list() { return "/manag/user/list"; } 使用ajax分页查询数据 <script type="text/javascript"> $(function () { pageQuery(1); }); ...
分页查询 ==？ 同步：异步
weixin_44678969的博客
10-24 368
总结一下最近学习项目中的一个模块-- 分页查询。即如何将数据库查到的结果显示到页面上？ 后台代码又该如何操作？ 同步查询流程图： 准备工作： 创建一个 Page 对象用于参数传递。 package com.atguigu.atcrowdfunding.util; import java.util.List; public class Page { //当前页 private Integer...
java 分页异步代码_layUI框架-laypage+SpringMVC实现后端分页 - Java天堂
weixin_39775029的博客
02-24 219
项目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法，着实有点可惜。所以从现在开始咯。laypage分页下面就以laypage的两种分页展开行文的思路：异步刷新分页和整页刷新式跳转。具体可参看官方文档。异步刷新分页首先使用laypage之前，先加载laypage模块。使用 layui....
异步查询分页
06-15
异步分页查询
ajax实现异步查询
weixin_34195546的博客
03-13 242
为什么80%的码农都做不了架构师？>>> ...
Ajax实现分页查询
唐僧的专栏
05-14 1376
    由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法，自己编写分页显示模块。    首先在页面上添加几个DIV:        用于显示查询回的数据    用于显示分页的页码    用于显示前一页、后一页、...、首页、尾页等控制按钮    用于显示当前页的页码    实现客户端分页函数：    var CurPage=0; 
基于ajax的异步分页技术实现
荒漠老翁
07-06 2158
1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态； 2、那么，Ajax 无刷新页面是运行在动态页面（.PHP）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面； 3、实现原理：通过前端 js 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。 好了，下面进行代码
laypage前端分页插件实现ajax异步分页
01-19
本文实例为大家分享了laypage前端分页插件，ajax异步分页，获取json数据实现无刷新分页，供大家参考，具体内容如下 function GetList(pageIndex) { var _this = var clone_this = ; _this = $(.BindDataList);/...
layui实现数据分页功能（ajax异步）
12-08
最近项目要使用layUI的分页，看了官方demo感觉还是不太清晰，摸索了一下，现在记录一下。 一、引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" > ...
layui实现数据表格table分页功能（ajax异步）
12-29
layui实现数据表格table分页功能，异步加载，表格渲染，含条件查询。 一、引入layUI的相关资源 <link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css > [removed][removed] 二、html页面代码 ...
关于Ajax异步请求后台数据进行动态分页功能
10-18
主要介绍了Ajax异步请求后台数据进行动态分页功能，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
ajax请求后台数据实现分页功能
07-05
ajax请求后台数据实现分页功能
利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力
12-08
先说下思路，无非就是异步执行ajax 把新列表所需要的数据用json格式返回来，输出table,你可以输出ui li(输出效率高) 在页面上。 效果图： Html代码： 代码如下: 设置它们的Class = “page” 以便于给它们增加Click...
jquery ajax 异步分页,jquery 分页 Ajax异步
weixin_33363704的博客
08-05 215
#th>th>nameth>操作th>tr>thead>tbody>ul>td>tr>tfoot>table>div>$(function() {init();showMenu();});//使用Ajax异步查询数据functionqueryPage(pageno) {vardataObj={"pageno": page...
ajax实现异步刷新分页,Ajax异步刷新分页功能-MySQL
weixin_42510914的博客
08-05 518
1.Servlet中代码/** 条件Map */Map map=new HashMap();/** 分页配置 */int index = request.getParameter("index")==null?1:Integer.parseInt(request.getParameter("index"));int size=2;map.put("index", (index-1)*size);m...
分页查询 ? 异步 : 同步
weixin_44678969的博客
10-28 671
上篇博客说到了同步请求的分页查询： you can click here to konw the knowledge 异步请求开发流程图： 第一步： html页面中跳转新页面 <a href="${APP_PATH }/user/toindex.do"><i class="glyphicon glyphicon-user"></i> 用户维护</a>...
异步实现分页
qiangzhogshou的博客
12-10 1242
为什么分页？ 分页是一种将所有数据分段展示给用户的技术。用户每次看到的并不是全部数据，而是其中的一部分，如果在这部分数据中没有找到自己想要的内容，可以通过指定页码或是翻页的方式转换到其他内容，直到找到自己想要的内容为止。这种技术缩短了请求响应时间，而且也不会出现因数据过多导致页面冗长的情况，提高了用户体验。 分页的实现初步思路：异步 ①为页面指定：能够显示的最多数据条数 ②通过当前页码来确定显...
异步获取数据Ajax，以及对获取的数据进行绑定（显示在页面上）
qq_43678748的博客
01-11 2624
异步获取数据Ajax，以及对获取的数据进行绑定（显示在页面上）
同步与异步实现分页效果
最新发布
07-14
一般来说，可以通过以下步骤来实现异步分页效果： 1. 在前端页面中添加分页组件，如翻页按钮或滚动触发加载更多数据的事件。 2. 当用户触发分页操作时，前端通过Ajax等方式向服务器发送请求，并传递当前页码等参数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值