基于spring框架oracle数据库ajax 分页

分页工具封装与实现

最新推荐文章于 2023-06-20 10:11:12 发布

xyw10000

最新推荐文章于 2023-06-20 10:11:12 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA JS 数据库 spring 文章标签： ajax分页 spring oracle

本文链接：https://blog.youkuaiyun.com/xuyw10000/article/details/18038433

JAVA 同时被 3 个专栏收录

136 篇文章

订阅专栏

35 篇文章

订阅专栏

数据库

35 篇文章

订阅专栏

本文介绍了一种分页工具的封装与实现方法，利用jQuery和JSON传输进行数据交互，适用于Gson输出JSON格式的数据。文章提供了详细的JS代码示例，并展示了如何在JSP页面中调用该工具。此外，还提供了后台处理逻辑，使用了自定义的AjaxPageUtil类来生成分页SQL。最终，展示了工具的效果和代码下载链接。

分页相信大家都不陌生,写也写过好多遍.只是每次都是反复的,故而想封装下,简化以后代码的编写.首先声明因为本人编写时间不长,测试时间不长.如有bug.尽请原谅.欢迎联系,本人定当修改.此仅供参考,大牛请勿嘲笑。
首先封装使用了jquery 若使用请导入相应js 采用的是json传输格式,服务端用的是Gson 输出json格式

直接上代码

js代码

/**********************************************************************/
//AJAX 分页 
/**
 *    
 * 项目名称：SSE   
 * 名称：AJAXPage   
 * 类描述：   
 * 创建人: xuyw   
 * Email：xyw10000@163.com 
 * 创建时间：2014-1-9 上午10:27:55     
 * 备注：   
 * 版本：1.0    
 *
 */
//--调用方式
/*
var pageToolobj = pageTool({
		"url" : "jsp/demo/pagetagdata.jsp",--查询url
		"formId" : "fm1",--表单ID
		"submitbtnId":"submitbtn",--提交按钮ID
		"pageToolId" : "pagetool",--工具条显示ID即上一页下一页等选项出现在那里
		"pageRowsCount" : "10,15,20",--一页展示多少条
		"targetBody" : "pagetbody",--数据显示ID即在那里下循环遍历
		"columnsName" : [ "ID", "CONTACT_NAME", "MOBILE", "ADDRESS", "DQ",
				"CREATE_USER" ] -- 显示列名
	});
*/	
/**********************************************************************/
var pendpage = 1;// 尾页
var pcurrentpage = 1;// 当前页
var pagerowscount = 10;// 一页多少条
// 上此选中行的id
var selectedId = "#pagetr0";
function selectClass(id) {
	$(selectedId).addClass("selectObj");
	$(id).click(function() {
		// 移除上次选中行的class:selected
		if (selectedId != "") {
			$(selectedId).removeClass("selectObj");
		}
		// 给当前点击行添加class:selected
		$(this).addClass("selectObj");
		// 更新上次选中行
		selectedId = "#" + $(this).attr("id");
	});
	$(id).hover(function() {
		$(this).addClass("hoverObj");
	}, function() {
		$(this).removeClass("hoverObj");
	});
}
function pageTool(config) {
	var object = new Object();
	object.config = config;
	var url = config.url;// 请求地址
	if (!url) {
		alert("请输入请求地址");
		return;
	}
	var formId = config.formId;// 表单ID
	if (!formId) {
		alert("请输入表单ID");
		return;
	}
	var pageToolId = config.pageToolId;// 显示工具条容器ID
	if (!pageToolId) {
		alert("请输工具条容器ID");
		return;
	}

	var pageRowsCount = config.pageRowsCount;// 一页显示多少条
	if (!pageRowsCount) {
		pageRowsCount = "10,12,15,18";
	}
	createTool(pageToolId, pageRowsCount, 0, 0);
	var targetBody = config.targetBody;
	var columnsName = config.columnsName;
	send(url, formId, targetBody, columnsName);
	// var endPage = config.data.endpage;//总页数
	object.gopage = function(cs) {
		send(url + "?currentPage=" + cs, formId, targetBody, columnsName);
	};
	var submitbtnId = config.submitbtnId;// 一页显示多少条
	if (submitbtnId) {
		$("#"+submitbtnId).click(function(){
			gopage('1');
		});
	}
	return object;
}
function createTool(id, pageRowsCount, totalpage, totalcount) {// 创建分页工具条
	var html2 = new Array();
	html2
			.push("<div id='xuyw'>每页<select name='pagerowscount' id='pagerowscount' onchange=gopage('1')>");
	var pageOption = pageRowsCount.split(",");
	for ( var i = 0; i < pageOption.length; i++) {
		var temp = pageOption[i];
		html2.push("<option value='" + temp + "'>" + temp + "</option>");
	}
	html2.push("</select>");
	html2.push("条记录 | 共<span id='ptotalpage'>" + totalpage
			+ "</span>");
	html2.push("页/<span id='ptotalcount'>" + totalcount
			+ "</span>条记录  | ");
	html2
			.push("<a id='pfirstpage' href=\"javascript:gopage('1')\">首 页</a> ");
	html2
			.push("<a id='puppage'    href=\"javascript:gopage('1')\">上一页</a>  ");
	html2
			.push("<a id='pdownpage'  href=\"javascript:gopage('1')\">下一页</a> ");
	html2
			.push("<a id='pendpage'  href=\"javascript:gopage('1')\">尾 页</a> | 第");
	html2
			.push("<input id='pcurrentpage' size='1' />页  <button id='btngo' onclick=gopage('btngopage');> Go </button></div>");
	$("#" + id).append(html2.join(""));
}
function updateTool(totalcont, currentpage, endpage) {// 更新工具条
	$("#ptotalpage").html("").html(endpage);
	$("#ptotalcount").html("").html(totalcont);
	var up = currentpage - 1 > 0 ? currentpage - 1 : 1;
	var down = currentpage + 1 > endpage ? endpage : currentpage + 1;
	$("#puppage").attr("href", "javascript:gopage('" + up + "')");
	$("#pdownpage").attr("href", "javascript:gopage('" + down + "')");
	$("#pendpage").attr("href", "javascript:gopage('" + endpage + "')");
	$("#pcurrentpage").val(currentpage);
}
function send(url, formId, targetBody, columnsName) {
	$.post(url, $("#" + formId).serialize(), function(data) {
		$("#" + targetBody + " tr").remove();
		var rowsdata = data.rowsdata;
		var html = new Array();
		for ( var i = 0; i < rowsdata.length; i++) {
			html.push("<tr id='pagetr" + i + "'  style='cursor: hand'>");
			var trowsdata = rowsdata[i];
			for ( var j = 0; j < columnsName.length; j++) {
				var tt = columnsName[j];
				html.push("<td>" + trowsdata[tt] + "</td>");
			}
			html.push("</tr>");
		}
		$("#" + targetBody).append(html.join(""));
		selectClass("#" + targetBody + " tr");
		pendpage = data.endpage;
		pcurrentpage = data.currentpage;
		pagerowscount = data.pagerowscount;
		updateTool(data.pagecount, pcurrentpage, pendpage);
	});
}
function gopage(url) {

	if (url == 'btngopage') {
		url = $("#pcurrentpage").val();
		var reg1 = /^\d+$/;
		if (url.match(reg1) == null) {
			alert("请输入合法的页码");
			$("#pcurrentpage").focus();
			return;
		}
		if (url * 1 > pendpage) {
			alert("请输入存在的页码");
			$("#pcurrentpage").focus();
			return;
		}
	}
	/*
	if (pagerowscount == $("#pagerowscount").val()) {
		if (pcurrentpage == url * 1) {
			alert("当前为第" + pcurrentpage + "页,无需跳转");
			return;
		}
	}
*/
	pageToolobj.gopage(url);
}

css

/*------table----*/
.table {
	width: 96%;
	margin-top: 0;
	margin-bottom: 0px;
	border: 1px solid #009170;
	border-top: 3px solid #009170;
	TABLE-LAYOUT: fixed
}

.table thead {
	background: #BEF4DD;
	color: #2A4705;
}

.table thead th {
	border-right: 1px solid #009170;
	border-top: 1px solid #009170;
	height: 25px;
	text-align: center;
}

.table tfoot {
	font-size: 12px;
}

.table tfoot tr {
	text-align: center;
	padding-right: 1em;
}

.table tfoot tr td {
	border-top: 1px solid #009170;
	text-align: right;
	background: #EEEEEE
}

.table tbody {
	font-size: 12px
}

.table tbody tr td {
	border: 1px solid #1A9C7E;
	text-align: center;
	padding: 2px;
}

.table tbody td .text {
	line-height: 1.5em;
	text-decoration: none
}

.table tbody td .text:link {
	line-height: 1.5em;
	text-decoration: none
}

.table tbody td .text:hover {
	color: red;
	text-decoration: underline;
	background: #f0eeee
}

.table tbody td .text:visited {
	color: red
}

.text {
	height: 18px;
	padding: 1px 2px 0px 2px;
	border: solid 1px #7F9DB9;
}

.selectObj {
	color: green;
	background-color: #FFee11;
}

.hoverObj {
	color: green;
	background-color: #FBEC88;
}

/*------table----*/
#xuyw a {
	color: #3C6E31;
	text-decoration: none;
}

#xuyw a:hover {
	background-color: #3C6E31;
	color: white;
}

jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'pagetag.jsp' starting page</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="styles.css">
	-->
		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>js/ajaxpage/pagetool.css">
		<script type="text/javascript"
			src="<%=basePath%>/plug-in/easyui/jquery-1.8.0.min.js"></script>
		<script type="text/javascript"
			src="<%=basePath%>js/ajaxpage/pagetool.js"></script>
		<style type="text/css">
#div1 {
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: auto;
}
</style>
	</head>

	<body>
		<div id="div1">
			<form id="fm1" action="jsp/demo/pagetagdata.jsp" method="post">
				<div align="center">

					手机
					<input name="sj">
					<button type="button" id="submitbtn">
						查询
					</button>
				</div>
				<table id="tb" class="table" align="center">
					<thead>
						<tr>
							<th>
								ID
							</th>
							<th>
								联系人
							</th>
							<th>
								手机
							</th>
							<th>
								收货地址
							</th>
							<th>
								地区
							</th>
							<th>
								创建人
							</th>
						</tr>
					</thead>
					<tbody id="pagetbody">

					</tbody>
					<tfoot>
						<tr>
							<td colspan="6" id="pagetool">

							</td>
						</tr>
					</tfoot>
				</table>
			</form>
		</div>
	</body>
	<script type="text/javascript">
	var pageToolobj = pageTool({
		"url" : "jsp/demo/pagetagdata.jsp",
		"formId" : "fm1",
		"submitbtnId" : "submitbtn",
		"pageToolId" : "pagetool",
		"pageRowsCount" : "10,15,20",
		"targetBody" : "pagetbody",
		"columnsName" : [ "ID", "CONTACT_NAME", "MOBILE", "ADDRESS", "DQ",
				"CREATE_USER" ]
	});
</script>
</html>

后台因为想简便,直接使用了jsp处理

<%@page import="com.xuyw.util.page.AjaxPageUtil"%>
<%@page import="com.google.gson.Gson"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="java.util.List"%>
<%@page import="com.xuyw.util.spring.BeanUtil"%>
<%@page import="org.springframework.jdbc.core.JdbcTemplate"%>
<%
	response.setContentType("text/html;charset=gbk;");
	request.setCharacterEncoding("gbk");
	String sj = request.getParameter("sj");
	JdbcTemplate jdbc = (JdbcTemplate) BeanUtil
			.getBean("ssejdbcTemplate", request.getSession()
					.getServletContext());
	String sql = "select * from CS_ADDRESS_BOOK where 1=1";
	if (!"null".equals(sj) &&!"".equals(sj) && sj != null) {
		sql = sql + " and mobile like '%" + sj + "%'";
	}

	/***********************action 执行下列代码**************************/
	int pagerowscount = 10;//一页显示条数
	int currentPage = 1;//当前页
	String tpage = request.getParameter("currentPage");
	String tpagecount = request.getParameter("pagerowscount");
	if (!"tpage".equals(tpagecount)&&tpage != null && !"".equals(tpage)) {
		currentPage = Integer.parseInt(tpage);
	}
	if (!"null".equals(tpagecount)&&tpagecount != null && !"".equals(tpagecount)) {
		pagerowscount = Integer.parseInt(tpagecount);
	}
	String sql2=AjaxPageUtil.createPageSql(sql,pagerowscount,currentPage);
	List list = jdbc.queryForList(sql2);
	response.setContentType("application/json;charset=utf-8");
	out.print(AjaxPageUtil.getJsonData(list,pagerowscount,currentPage));
	/*************************************************/
%>

AjaxPageUtil

package com.xuyw.util.page;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.google.gson.Gson;
/**
 *    
 * 项目名称：SSE   
 * 名称：AjaxPageUtil   
 * 类描述：   
 * 创建人: xuyw   
 * Email：xyw10000@163.com 
 * 创建时间：2014-1-9 上午10:27:55     
 * 备注：   
 * 版本：1.0    
 *
 */
public  class AjaxPageUtil {
	private static final Gson gson = new Gson();
	/**
	 * 
	 * 产生分页sql
	 * @param sql 原始查询SQL
	 * @param pagerowscount 一页显示多少条
	 * @param currentPage 当前页
	 * @return
	 * @return String
	 */
	public static String createPageSql(String sql, int pagerowscount, int currentPage) {
		int begin = 0;// rownum起始
		int end = 0;// rownum终止
		begin = (currentPage - 1) * pagerowscount + 1;
		end = currentPage * pagerowscount;
		StringBuilder builder = new StringBuilder();
		builder.append(" select * from (select a.*,(select COUNT(*) ");
		builder.append(" from ");
		builder.append(" ( ");
		builder.append(sql);
		builder.append(" ) ) ");
		builder.append(" pagecount,rownum row_num from ( ");
		builder.append(sql);
		builder.append(" ) a where rownum<=" + end + ") where row_num >= "
				+ begin);
		return builder.toString();
	}

	public static String getJsonData(List list,int pagerowscount, int currentPage) {
		int endpage = 0;//尾页
		int pagecount=0;//总条数
		if (list!=null&&list.size() > 0) {
			Map map = (Map) list.get(0);
			pagecount = Integer.parseInt(map.get("PAGECOUNT") + "");
			endpage = pagecount % pagerowscount == 0 ? pagecount
					/ pagerowscount : pagecount / pagerowscount + 1;
		}
		Map data = new HashMap();
		data.put("endpage",endpage);
		data.put("currentpage",currentPage);
		data.put("pagecount",pagecount);
		data.put("pagerowscount",pagerowscount);
		data.put("rowsdata",list);
		return gson.toJson(data);
	}
}

效果如下