基于 HTML、Ajax以及 Mybatis 实现 Web 分页

清疚 2024-04-18 14:56 56阅读 0赞

### 1.前端 js 文件 ###

<script type="text/javascript">
    	
    	var currPageNoStr=$("#pageIndex").val();       //当前页数
    	var currPageNo = parseInt(currPageNoStr);
    	var pageCount=1;                               //总页数
    	//直接加载主函数
    	$(function(){
    		showPage();
    	    $("#frontPage").click(front);
    	    $("#nextPage").click(next);
    	    $("#firstPage").click(goFirst);
    	    $("#lastPage").click(goLast);
    	});
    	
    	//用来处理请求成功后，返回订单列表的函数
    	function common(data){
    		$("#tmAbout").empty();       //清空需要列出的内容
            $.each(data.obj, function (index, content) {
    	    $("#tmAbout").append("<div class='col-lg-4'><div class='tm-bg-black-transparent 
    tm-about-box'><div class='tm-about-number-container'>"+index+"</div><h3 class='tm-about-
    name'>Best Quality</h3><p class='tm-about-description'>"+content.order_url+"</p></div>
    </div>");
    	     });
    	}
    	//第一次返回页面
    	function showPage(){
    		var currPageIndex = {"currPageNo":currPageNo};
    		$.ajax({
    			url:"/data_miner/order/paging",
    			dataType:"json",
    			async:false,
    			data:currPageIndex,
    			type:"post",
    			success:function(data){
    				/* var orderData = eval(data);         */
    				if(data.message=="发生未知错误！"){
    					alert("出现错误！");
    				}else{
    					var countStr = data.message;
    					var count = parseInt(countStr);
    				    pageCount = Math.ceil(count/9);
    					$("#tmAbout").empty();          //清空需要列出的内容
    					$.each(data.obj, function (index, content) {
    						$("#tmAbout").append("<div class='col-lg-4'><a 
    href=http://localhost:8080/data_miner/order?order_id="+content.order_id+"><div class='tm-
    bg-black-transparent tm-about-box'><div class='tm-about-number-container'>"+index+"</div>
    <h3 class='tm-about-name'>Best Quality</h3><p class='tm-about-
    description'>"+content.order_url+"</p></div></a></div>");
    		            });   
    				}
    			},
    			error:function(data){
    				alert(data.message);
    			}
    		});
    	}
    	//上一页
        function front(event){
     		if(currPageNo==1){
     			currPageNo=1;
     		}else{
     			currPageNo--;
     		}
     		var currPageIndex = {"currPageNo":currPageNo};
    	  	$.ajax({  
    	        type:"POST",  
    	        dataType:"json",  
    	        url:"/data_miner/order/paging",   //回发到的页面  
    	        data:currPageIndex,
    	        success: common
    	     });
        }
        //下一页
        function next(event){
     		if(currPageNo==pageCount){
     			currPageNo=pageCount;
     		}else{
     			currPageNo++;
     		}
     		var currPageIndex = {"currPageNo":currPageNo};
    	  	$.ajax({  
    	        type:"POST",  
    	        dataType:"json",  
    	        url:"/data_miner/order/paging",   //回发到的页面  
    	        data:currPageIndex,
    	        success: common
    	     });
        }
        //首页
        function goFirst(event){
       		currPageNo=1;
       		var currPageIndex = {"currPageNo":currPageNo};
    	  	$.ajax({  
    	        type:"POST",  
    	        dataType:"json",  
    	        url:"/data_miner/order/paging",   //回发到的页面  
    	        data:currPageIndex,
    	        success: common
    	     });
        }
        //尾页
        function goLast(event){
       		currPageNo=pageCount;
       		var currPageIndex = {"currPageNo":currPageNo};
    	  	$.ajax({  
    	        type:"POST",  
    	        dataType:"json",  
    	        url:"/data_miner/order/paging",   //回发到的页面  
    	        data:currPageIndex,
    	        success: common
    	     });
        }
    </script>

### 2.Controller 层 ###

@Autowired
    	private OrderService orderService;
    	
    	/*
    	 * 分页功能
    	 */
    	@RequestMapping("paging")
    	public @ResponseBody Response orderList(Integer currPageNo) {
    		Response re = null;
    		currPageNo = (currPageNo-1)*9;
    		re = orderService.orderList(currPageNo);
    		return re;
    	}

### 3.Service 层 ###

@Autowired
    	private OrderMapper orderMapper;
    	
    	/*
    	 * 订单分页以及获取未完成的订单总数
    	 */
    	public Response orderList(Integer currPageNo) {
    		Response re = new Response();
    		try {
    			List<Order> list = orderMapper.getOrdersJudgeFlag(currPageNo);
    			int countPage = orderMapper.countOrdersJudgeFlag();
    			String countPageStr = Integer.toString(countPage);
    			re.setFlag(true);
    			re.setMessage(countPageStr);
    			re.setObj(list);
    		} catch (Exception e) {
    			re.setFlag(false);
    			re.setMessage("发生未知错误！");
    			re.setObj(null);
    			e.printStackTrace();
    		}
    		return re;
    	}

### 4.Mapper 层 ###

int countOrdersJudgeFlag()throws Exception;
    
    List<Order> getOrdersJudgeFlag(@Param(value="currPageNo") Integer currPageNo)throws 
    Exception;

### 5.xml 文件 ###

<select id="countOrdersJudgeFlag" resultType="java.lang.Integer">
      	select count(*) from `order` where order_flag=0
      </select>
    
      <select id="getOrdersJudgeFlag" parameterType="java.lang.Integer" 
    resultType="com.data_miner.entity.Order">
      	select * from `order` where order_received=0 limit ${currPageNo},9
      </select>

## ##

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 Mybatis实现分页查询

Mybatis实现分页查询

心已赠人/ 2024年05月07日 17:16/ 0 赞/ 93 阅读

相关基于 HTML、Ajax以及 Mybatis 实现 Web 分页

1.前端 js 文件 <script type="text/javascript"> var currPageNoStr=$("page...

清疚/ 2024年04月18日 14:56/ 0 赞/ 57 阅读

相关【MyBatis Plus】使用 MyBatis Plus 完成分页功能，以及通用分页实体的实现

文章目录一、MyBatis Plus 分页插件 1.1 了解 MyBatis Plus 的插件功能 1.2 配置分页插件

浅浅的花香味﹌/ 2024年02月20日 12:06/ 0 赞/ 56 阅读

相关 SpringMVC+Mybatis+Oracle实现web分页

具体操作步骤如下： (一)操作的数据库表： create table table_ip ( id number primary key,

太过爱你忘了你带给我的痛/ 2023年10月17日 08:08/ 0 赞/ 12 阅读

相关 Mybatis实现分页功能

问题在普通的分页过程中，要查询出所有的数据，并查询出count才能进行分页，代码量多，处理起来比较麻烦！处理使用mybatis分页插件PageH

拼搏现实的明天。/ 2023年07月11日 12:46/ 0 赞/ 30 阅读

相关【Mybatis】mybatis如何实现分页

【Mybatis】mybatis如何实现分页 mysql分页功能原理实现分页必要条件 1. 必须知道某一页从哪里开始到哪里结束 2. 必须知道页面的大小

待我称王封你为后i/ 2022年12月15日 12:43/ 0 赞/ 229 阅读

相关【Mybatis】mybatis如何实现分页

【Mybatis】mybatis如何实现分页 mysql分页功能原理实现分页必要条件 1. 必须知道某一页从哪里开始到哪里结束 2. 必须知道页面的大小

悠悠/ 2022年10月24日 11:57/ 0 赞/ 223 阅读

相关 mybatis实现分页查询-自己封装分页方法

大致结构如下： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZO

╰+哭是因爲堅強的太久メ/ 2022年09月10日 04:29/ 0 赞/ 38 阅读

相关 MyBatis3-实现MyBatis分页

此文章中的例子是沿用上一篇文章[http://www.cnblogs.com/EasonJim/p/7055499.html][http_www.cnblogs.com_Eas

分手后的思念是犯贱/ 2022年05月25日 14:07/ 0 赞/ 345 阅读

相关 java web实现分页查询

引言 > 思路：本次教大家采用java+jsp+servlet+c3p0技术实现数据的分页查询，在这之前，请创建好数据库表和搭建好基础框架并连接上数据库。分页会用到一个封

我会带着你远行/ 2021年09月21日 21:50/ 0 赞/ 519 阅读