xyw10000
2014-01-09 13:38:04
基于spring框架oracle数据库ajax 分页 .
分页相信大家都不陌生,写也写过好多遍.只是每次都是反复的,故而想封装下,简化以后代码的编写.首先声明因为本人编写时间不长,测试时间不长.如有bug.尽请原谅.欢迎联系,本人定当修改.此仅供参考,大牛请勿嘲笑。
首先封装使用了jquery 若使用请导入相应js 采用的是json传输格式,服务端用的是Gson 输出json格式
直接上代码 http://pan.baidu.com/s/1pJloXcf
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);
}
}
效果如下
猜你喜欢
相关代码
- ajax实现文件上传
- 原 ssh通过ajax匹配数据库的用户名是否已经存在
- ajax上传图片代码实例
- ajax页面动态加载弹出窗口
- 证 原生js开发AJAX数据分页请求实例
- 原 手把手教你们通过jquery ajax调用查询java struts2后端数据+js拼接字符串
- 原 手把手教你们通过jquery ajax调用查询java servlet后端数据+js拼接字符串
- asp实现Ajax百度搜索提示的效果
- 证 spring MVC通过ajax无刷新实现图片预览上传项目源码下载
- 原证 jquery $ajax GET请求在IE浏览器兼容中遇到的304 cache请求的经验分享
- 原 php读取txt文件通过ajax刷新显示期货五档行情列表
- 原 jquery ajax无刷新请求Struts2验证用户名密码数据库是否存在
最近下载
最近浏览
chenranr LV10
6月15日
sunlea LV20
5月4日
雷迪斯俺的乡亲们 LV11
3月23日
1743716295 LV4
2022年11月12日
xiaofang45612 LV8
2022年5月26日
jwfadacai LV8
2022年5月25日
c327869412 LV2
2022年4月14日
dukie123 LV1
2022年2月16日
ycyyglp
2021年12月21日
暂无贡献等级
fy6666 LV15
2021年12月21日
