最代码广告位
xyw10000的gravatar头像
xyw100002014-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("条记录&nbsp;|&nbsp;共<span id='ptotalpage'>" + totalpage
   + "</span>");
 html2.push("页/<span id='ptotalcount'>" + totalcount
   + "</span>条记录 &nbsp;|&nbsp;");
 html2
   .push("<a id='pfirstpage' href=\"javascript:gopage('1')\">首 页</a>&nbsp;");
 html2
   .push("<a id='puppage'    href=\"javascript:gopage('1')\">上一页</a> &nbsp;");
 html2
   .push("<a id='pdownpage'  href=\"javascript:gopage('1')\">下一页</a>&nbsp;");
 html2
   .push("<a id='pendpage'  href=\"javascript:gopage('1')\">尾 页</a>&nbsp;|&nbsp;第");
 html2
   .push("<input id='pcurrentpage' size='1' />页 &nbsp;<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);
 }
}

效果如下


打赏

顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友