ajax动态分页代码

最新推荐文章于 2022-04-26 21:36:08 发布

瘦肉不知肥肉香

最新推荐文章于 2022-04-26 21:36:08 发布

阅读量281

点赞数

文章标签： ajax jsp java js web

本文链接：https://blog.csdn.net/liqian_yu/article/details/108368455

版权

首先使用的是ajax分页，我们首先配置一个插件jquery-1.8.3.min.js（不同版本也可以），此页面的是路径${pageContext.request.contextPath}/orderlistajax用户集合list2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery-1.8.3.min.js"></script>
</script
</head>
<body>
<div id="top-image">用户管理</div>
<div id="main-show">
  <div style="margin-left: 330px;">
	 <!--  <form action="">
	  	用户名称<input type="text" name="username" id="username"/>
	  	<input type="button" id="search" value="查询"/>
	  </form> -->
  </div>
  <center>
  <table style="width: 850px"
		<!-- 动态生成数据，做数据的显示的局部刷新 -->
		<tbody id="mytbody">
			
		</tbody>
	</table>
	<!--分页栏 动态生成-->
	<div id="kkpager" style="margin-left: 330px;"></div>
</center>
</div>
<script type="text/javascript">



//分页的js代码
//第一次进入页面默认显示第一页的数据
var currentPage = 1;
//查询  
function loadData(page) {
	currentPage = page;
	$.post('${pageContext.request.contextPath}/orderlistajax', {currentPage:page,oid:oid,shrname:shrname,hometown:hometown,province:province,odate:odate,newdate:newdate}, function(data){
		//先清除前一步的数据tbody
			$("#mytbody").html("");
			//先清除前一步的分页div
			$("#kkpager").html("");
			//遍历数据 生成动态的数据 附加到tbody里面去 ，data就是我们的分页的实体类PageBean转换后的Map集合,list2键就是数据
			if (data.list2 != null && data.list2.length > 0) {
				for (var i = 0; i < data.list2.length; i++) {
				    //将数据动态的附加到<tbody id="mytbody"></tbody>
				    var lock = "";
				    if(data.list2[i].locked==1){
				    	lock = '锁定';
				    }else{
				    	lock = '正常';
				    }
					$("#mytbody").append("<tr>"+
					"<td>"+data.list2[i].oid+"</td>"+
					"<td>"+data.list2[i].shrname+"</td>"+
					"<td>"+data.list2[i].shrtel+"</td>"+
					"<td>"+data.list2[i].goodsbrand+"</td>"+
					"<td>"+data.list2[i].eaddress+"</td>"+
					"<td>"+data.list2[i].zyunfei+"</td>"+
					"<td>"+data.list2[i].zssdshk+"</td>"+
					"<td>"+data.list2[i].zcedshk+"</td>"+
					"<td>"+data.list2[i].zdname+"</td>"+
					"<td>"+data.list2[i].odate+"</td>"+
					"<td id='verify'>"+data.list2[i].verify+"</td>"+
					"<td><a href='#' οnclick=location.href='${pageContext.request.contextPath}/orderdetail?id="+data.list2[i].id+"'>详情</a>"+
					"<a  href='#'  name="+data.list2[i].id+">打印 </a>"+
					"<td><a href='#' οnclick=location.href='${pageContext.request.contextPath}/usermodifypage?id="+data.list2[i].id+"'>预览</a>"+
					"<td  colspan='3'><a href='#' class='del' name="+data.list2[i].oid+">删除</a>"+
					"<td colspan='3'><a href='#' οnclick=location.href='${pageContext.request.contextPath}/order_modify?id="+data.list2[i].id+"'>修改</a>"+
					"<td><a href='#' class='verify' name="+data.list2[i].id+">审核</a>"+
					"</td></tr>");	
				}
			}
			//分页脚标 ：data.pageSize每页显示数， data.pageCount总的页数， data.rowCount总的行数
			createPageInfo(page,data.pageSize,data.pageCount,data.rowCount,goToPage);
	},"json" ); 
}  

	function goToPage(n){
		loadData(n);
	}
	
	//载入 (默认加载全部) 默认第一次为currentPage为 1
	loadData(currentPage);  
	 
    //init
    function createPageInfo(currentPage,pageSize,pageCount,recordCount,callbackFunction){
    	
    	var totalPage = pageCount;
    	var totalRecords = recordCount;
    	var pageNo = currentPage;
	    	if(!pageNo){
    		pageNo = 1;
    	} 

 	    $("#kkpager").html("");

	    	
    	//生成分页
    	//有些参数是可选的，比如lang，若不传有默认值
		kkpager.inited = false;
	    	kkpager.generPageHtml({
    		pno : pageNo,
    		//总页码
    		total : totalPage,
    		mode : 'click',
    		//总数据条数
    		totalRecords : totalRecords,
    		click : function(n){
    	        //这里可以做自已的处理
    	        //处理完后可以手动条用selectPage进行页码选中切换
    	       callbackFunction(n);
    	       kkpager.selectPage(n)
    	    }
    	}); 
    }
    
    //查询按钮的提交
 	$("#search").bind("click",function(){
		loadData(currentPage);	
	});
</script>
</body>
</html>

瘦肉不知肥肉香

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax动态分页代码

首先使用的是ajax分页，我们首先配置一个插件jquery-1.8.3.min.js（不同版本也可以），此页面的是路径${pageContext.request.contextPath}/orderlistajax用户集合list2<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%><%@ taglib uri="http:/
复制链接

扫一扫