基于spring框架oracle数据库ajax 分页_数据库必须是oracle,页面必须是html+ajax+js 查询全部员工信息(隔行变色) 【分页_xyw10000的博客-程序员秘密

技术标签： JAVA  spring  spring oracle  JS  ajax分页  数据库  

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

直接上代码

js代码

/**********************************************************************/
//AJAX 分页 
/**
 *    
 * 项目名称：SSE   
 * 名称：AJAXPage   
 * 类描述：   
 * 创建人: xuyw   
 * Email：[email protected] 
 * 创建时间：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' οnchange=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' οnclick=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：[email protected] 
 * 创建时间：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);
	}
}

效果如下

附上代码下载地址 http://pan.baidu.com/s/1pJloXcf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a714115852/article/details/18038433

智能推荐

EdgeX Foundary 2.1Jakarta版官方文档中文翻译_edgex文档_Hey___Man的博客-程序员秘密

基于机器翻译，部分翻译有修订，不清楚的地方请参阅官方文档。引言EdgeX Foundry是一个开源的、供应商中立的、灵活的、可互操作的、位于网络边缘的软件平台，与设备、传感器、执行器和其他物联网对象的物理世界进行交互。简单地说，EdgeX是边缘中间件——服务于物理传感和驱动“事物”与我们的信息技术(IT)系统之间。EdgeX平台能够并且鼓励快速增长的物联网解决方案提供商社区，在可互操作的组件生态系统中，合作，以减少不确定性，加快上市时间，以及促进规模。通过引入这种急需的互操作性，EdgeX可以更容

STP生成树（华为）_过桥米线真贵的博客-程序员秘密

前言 在实际的网络环境中，物理环路可以提高网络的可靠性，当一条线路断掉的时候，另一条线路仍然可以传输数据，但是，在交换的网络中，当交换机收到一个未知的地址数据帧时，交换机会将这个数据帧广播出去，这样，存在物理环路的交换网络中，就会产生广播风暴，如何解决这个问题呢？这就要用到STP1. STP概述冗余链路存在的问题：1.广播风暴 2.多帧复制 3.MAC地址表紊乱虽然冗余链路存在一些问题，但是也能够为网络提供备份链路，再用一个方法来达到防止环路的发生。STP并不是断掉物理环路，而是...

Linux添加新硬盘（硬盘扩容）_linux 添加硬盘 扩容_weixin_37585701的博客-程序员秘密

1.     将新硬盘插入服务器插槽2.    用 fdisk -l 查看下:（用root用户登录，不用用其他用户然后在su）红色方框内就是新安装的硬盘sdb3.下面对硬盘进行分区如果新硬盘只用一个分区，上面两个红色方框出直接enter，不需要输入。再通过fdisk –l 指令看新建立的磁盘分区4.     下面对分区进行格式化5. 

【PTA】【C语言】【Python】输出二维数组每一列的最小值_鸢想睡觉的博客-程序员秘密

本题要求编写程序，输出一个给定的m×n矩阵各列元素的最小值。输入格式:输入第一行给出两个正整数m和n（1≤m,n≤10）。随后m行，每行给出n个整数，其间以空格分隔。输出格式:每行输出对应矩阵列元素的最小值。输入样例:3 43 1 5 21 -4 6 71 0 2 3输出样例:1-422C语言代码如下：#include &lt;stdio.h&gt;int main(){ int m, n, i, j, min; scanf("

pytools.prefork.ExecError: error invoking ‘nvcc --version‘: [Errno 2] No such file or directory_ChaoFeiLi的博客-程序员秘密

问题说明：。我在Linux本地端运行pycuda的示例代码，没有任何问题。但是我在使用pycharm 远程调试代码时，出现了上述问题。这个问题需要两步走，如果第一步之后，可以实现了，就不用第二步了第一步：export PATH="/usr/local/cuda/bin:$PATH"export LD_LIBRARY_PATH="/usr/local/cuda/lib64:$LD_LIBRARY_PATH"Steps1. find .bashrc file.2. Add above l

webRTC中的AppRTCDemo在iOS模拟器上运行，和在iPhone上运行_天下只此一家的博客-程序员秘密

推荐一篇英文文章，说得很详细，我认为这篇文章是作者根据这个路径：/trunk/talk/app/webrtc/objc/README，中的readme文件写的。文章链接如下:http://ninjanetic.com/how-to-get-started-with-webrtc-and-ios-without-wasting-10-hours-of-your-life/我成功在iO

随便推点

【转】精明的程序员——小程大爱_精明的采购员john_Microchen2008的博客-程序员秘密

最近一段时间太忙了，都没有心思到处逛逛，今天偶然看到这篇博文，觉得很赞。原创地址http://blog.csdn.net/baby313/article/details/8446256精明的程序员——小程大爱虚伪的大项目在参加软件学院研究中心面试的时候，老师们问我有什么项目经历。记得我当时的回答是这样的：“我的项目经历主要是在Intel公司的一年实习经历，这期间主要参与了两个项

详解CreateFile函数_createfile函数详解_yonger7的博客-程序员秘密

CreateFile函数可以用来打开许多设备，如：文件、目录、逻辑磁盘驱动器、物理磁盘驱动器、串口、并口、邮件槽、命名管道等； HANDLE  CreateFile(PCTSTR  pszName, DWORD  dwDesiredAccess, DWORD  dwShareMode, PSECURITY_ATTRIBUTES  psa, DWORD  dwCreationDispositio

dcp文件生成失败问题_[chipscope 16-331] dcp file did not get generated _时光-易逝的博客-程序员秘密

xilinx在工程里新添加的ip核不会马上生成dcp文件，只有generate output products成功执行后才可以看到，我在使用ram ip时，设置了一个大容量(64KB)的ram发现generate报错了，最终也没有生成对应的dcp；但我把ram的大小设小后却可以正常生成，同样在服务器上编译也没有问题。这个问题xilinx没有任何错误提示就是告诉你生成失败了，初步判断我电脑...

html语言需要dw吗,DW（HTML-基础知识点1）_weixin_39569894的博客-程序员秘密

1、认识网页：a. 分析网页结构：header、banner、main、footerb. 如何拆分网页：一级盒、二级盒、三级盒等02、网页HTML：a. HTML：超文本标记语言(Hyper Text Markup Language)；b. 网页由图片、链接、音频、视频、动画等组成的超文本；超文本：可视化内容，表达含义丰富；标记：有语义的单词通过“标记”表现“超文本”c. HTML用来制作...

公司含硫原料生产_某炼油厂将四种不同含硫_Kilig*的博客-程序员秘密

问题 某公司将4种不同含硫量的液体原料(分别记为甲、乙、丙、丁)混合生产两种产品 (分别记为A,B).按照生产工艺的要求,原料甲,乙、丁必须首先倒入混合池中混合,混 合后的液体再分别与原料丙混合生产A,B.已知原料甲、乙,丙、丁的含硫量分别是 3% , 1 % ,2% , 1 % ,进货价格(单位:千元/t)分别为6,16,10,15;产品A,B的含硫量分 别不能超过2.5% ,1.5% ,售价分别为9,15.根据市场信息,原料甲、乙,丙的供应没有 限制,原料丁的供应量最

Qt自定义控件----PushButton显示svg矢量图_qt显示svg图片_香油哥的博客-程序员秘密

文章目录前言一、实现原理二、svg图片的内容展示三、核心代码实现1.引入库2.读入数据总结前言QSS中给按钮添加图片，在按钮放大或者缩小时，png图片会模糊。为了让程序自适应布局或者dpi变化时，图标不模糊，考虑使用svg矢量图来代替png图片。效果如下图：一、实现原理&lt;font color=#999AAAsvg矢量图内部使用的时xml文件进行描述。文件中有很多元素和其对应的属性值。本文主要对单色图标的填充色进行修改，达到使用一张svg图片通过修改填充色，完成按钮的 norma..

推荐文章

热门文章

相关标签