`
a881127b
  • 浏览: 65887 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

struts-jquery-ajax高效分页(mysql版)

阅读更多
本文是struts2+jquery-ajax实现的在mySQL下的高效分页
1:先看下预览效果:(30多万数据测试)
 

2:这个实现首先把后台数据库返回的RowSet转化成json格式的字符串,再把这个json格式的字符串传给前台,用jquery解析
  RowSet数据到json格式的数据转化函数如下:
 
/*
      * @param count 数据总条目数
      * @param pageCount 每页显示数据数
      * */
     private static String RowSetToJson(RowSet rt,int count,int pageCount){
    	 ResultSetMetaData rm=null;
    	 StringBuilder sb=new StringBuilder();
    	 try {
			 rm=rt.getMetaData();
			 sb.append("{\"pageCount\":\""+count+"\",\"pageData\":[");
			 int columNum=rm.getColumnCount();
			 List<String> list=new ArrayList<String>();
			 for(int i=0;i<columNum;i++){
				 list.add(rm.getColumnName(i+1));
			 }
			 
			 for(int i=0;i<pageCount&&rt.next();i++){
				 sb.append("{");
				 for(int j=0;j<list.size();j++){
					 if(j!=list.size()-1){
						 sb.append("\""+list.get(j)+"\":\""+rt.getString(list.get(j))+"\",");
					 }else{
						 sb.append("\""+list.get(j)+"\":\""+rt.getString(list.get(j))+"\"");
					 }
				 }
				 if(i!=pageCount-1){
					 sb.append("},");
				 }else{
					 sb.append("}");
				 } 
			 }
			 sb.append("]}");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
    	 return sb.toString();
     }

  调用转化函数方法:
 
 public static String getJson(String tableName,String select,String where,String orderby,int pageIndex,int pageCount){
         StringBuilder sb=new StringBuilder();
         sb.append("select "+select+" from "+tableName);
         if(!"".equals(where)){
        	 sb.append(" ");
        	 if(where.startsWith("where")){
        		 sb.append(" "+where);
        	 }else{
        		 sb.append(" where "+where);
        	 }
         }
         sb.append(" "+orderby+" ");
         int temp=(pageIndex-1)*pageCount;
         sb.append(" limit "+temp+","+pageCount);
    	 RowSet rt=DBop.search(sb.toString());
    	 //求数据总条目数
         int rowNum=0;
         rowNum=DBop.getNum(tableName,where);
    	 return RowSetToJson(rt,rowNum,pageCount);
     }


3:在action函数里调用方法:
  
import com.jiang.DB.GetData;
import com.opensymphony.xwork2.ActionSupport;

public class GetPageData extends ActionSupport {
	private String p;//当前页
	private String orderby;//排序规则
	private String data;
     public String getData() {
		return data;
	}

	public void setData(String data) {
		this.data = data;
	}

	public String getP() {
		return p;
	}

	public void setP(String p) {
		this.p = p;
	}

	public String getOrderby() {
		return orderby;
	}

	public void setOrderby(String orderby) {
		this.orderby = orderby;
	}

	public String execute()throws Exception{
    	 if("".equals(orderby)){
    		 orderby="order by id_t";
    	 }
    	 if("".equals(p)){
    		 p=String.valueOf(1);
    	 }
    	 if(Integer.parseInt(p)==0){
    		 p=String.valueOf(1);
    	 }
    	 data=GetData.getJson("pagetest", "*", "","order by id_t", Integer.parseInt(p), 10);
//    	 System.out.println(data);
    	 return SUCCESS;
     }
}
]

4:页面ajax请求代码:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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>jquery-ajax分页</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">
	<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.pagination.js" type="text/javascript"></script>
	<link href="js/pagination.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	   var orderby="order by id_t";
	   $(document).ready(function(){
		   initData(0);
		   });
       //翻页响应
	   function pageselectCallback(page_id,jq) {
           initData(page_id);
       }

	   function initData(pageindx)
       {
          var tbody="";
          var pageCount="";
         $.ajax({
              type: "POST",//用POST方式传输
              dataType:"json",//数据格式:JSON
              url:'getData.action',//目标地址
              async:false,//作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化
              data:"p="+(pageindx+1)+"&orderby="+escape(orderby),
              beforeSend:function(){$("#divload").show();$("#Pagination").hide();},//发送数据之前
              complete:function(){$("#divload").hide();$("#Pagination").show();},//接收数据完毕
              success:function(json) {
                       $("#productTable tr:gt(0)").remove();
                       var productData = json.pageData;
                       pageCount=json.pageCount;
                       if(productData==""){
                          $("#divload").hide();
                          dis();
                          return false;
                       }
                       $.each(productData, function(i, n) {
                           var trs = "";
                           trs += "<tr><td align='center'>" + n.id_t + "</td><td align='center'>"+n.name_t+"</td><td align='center'>"+n.reamark_t+"</td><td align='center'>"+n.age_t+"</td><td align='center'>"+n.hobby_t+"</td><td align='center'><a href=\"javascript:edit('')\">编辑</a>&nbsp;&nbsp;<a href=\"javascript:view('')\">查看</a></td></tr>";
                        tbody+=trs; 
                       });

                         $("#productTable").append(tbody);
                        //行交替颜色
                         $("#productTable tr:gt(0):odd").attr("class", "");
                         $("#productTable tr:gt(0):even").attr("class", "");
                       }//end of success
               });
              if(pageCount!=0){
                  $("#Pagination").pagination(pageCount, {
                   callback: pageselectCallback,
                   prev_text: '<< 上一页',
                   next_text: '下一页 >>',
                   items_per_page:10,
		            num_display_entries:6,
		            current_page:pageindx,
		            num_edge_entries:2
               });
              }
      }
//排序
	   function Sort(ordercolumn,ordertipid){
       var ordertype="";//1:desc,0:asc
       var $orderimg = $("#"+ordertipid);
       if($orderimg.html()!="")
       {
            var imgsrc="";
            imgsrc = $("img",$orderimg).attr("src");
            if(imgsrc.indexOf("asc")>-1){
                 $(".ordertip").empty();
                 $orderimg.html("&nbsp;<img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
           
                 ordertype = 1;
            }
           else
           { 
              $(".ordertip").empty();
               $orderimg.html("&nbsp;<img src=\"images/sort_asc.gif\" align=\"absmiddle\">");
              
               ordertype = 0;
           }
       }
       else
       {
            $(".ordertip").empty();
            $orderimg.html("&nbsp;<img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
               ordertype = 1;
        }
       
       orderby = ordercolumn+"_"+ordertype;
       initData(0);
       
   }
	</script>
  </head>
  
  <body>
    <div id="divload" style="top:50%; right:50%;position:absolute; padding:0px; margin:0px; z-index:999"></div>
    <table id="productTable" style="width:70%" class="TableList">
           <tr class="TableHeader">
             <th nowrap align="middle"><a style="cursor:pointer;" onclick="Sort('id_t','id_t');return false;">id</a><span id="id_t" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
             <th nowrap align="middle"><a style="cursor:pointer;" onclick="Sort('name_t','name_t');return false;">name</a><span id="name_t" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
             <th nowrap align="middle"><a style="cursor:pointer;" onclick="Sort('remark_t','remark_t');return false;">remark</a><span id="remark_t" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
             <th nowrap align="middle"><a style="cursor:pointer;" onclick="Sort('age_t','age_t');return false;">age</a><span id="age_t" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
             <th nowrap align="middle"><a style="cursor:pointer;" onclick="Sort('hobby_t','hobby_t');return false;">hobby</a><span id="hobby_t" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
             <th nowrap align="middle"><a style="cursor:pointer;">操作</a><span id="Span8" class="ordertip"><img src="images/sort_desc.gif" align="absmiddle"></span></th>
          </tr>
     </table>
        <div id="Pagination" class="flickr" style="text-align:left"></div>
  </body>
</html>


5:struts.xml代码:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
  <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="true" />
    
    <package name="default" namespace="/" extends="struts-default">
        <default-action-ref name="index" />
        <action name="getData" class="com.jiang.action.GetPageData">
            <result name="success">/pageData.jsp</result>
        </action>
    </package>
</struts>    


6:原代码下载:
  
分享到:
评论
1 楼 samng508 2011-07-26  
哪里体现出高效这两个字???

相关推荐

    struts2-jquery-plug ShowCase

    将Struts2与jQuery结合,可以实现更高效、用户友好的前端交互。 在这个"struts2-jquery-plug ShowCase"项目中,开发者展示了如何在Struts2应用中集成jQuery插件,以增强用户界面和交互体验。FHP(Full Hibernate ...

    jQuery+Struts+Ajax无刷新分页

    **jQuery+Struts+Ajax无...总结,这个"jQuery+Struts2+Ajax无刷新分页"项目展示了如何结合现代前端技术和后端框架实现高效、友好的Web应用。通过学习和实践,开发者可以更好地理解和掌握这些技术在实际项目中的应用。

    jquery java struts2 实现分页 非常好看的分页

    本教程将详细讲解如何利用jQuery、Java和Struts2框架来实现一个美观且可自定义样式的分页功能。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在分页场景...

    jquery ajax 分页 局部刷新 mysql数据库

    本教程将探讨如何使用jQuery的AJAX功能实现页面局部刷新,同时结合MySQL数据库和Struts2框架实现高效的分页功能。 首先,jQuery AJAX是JavaScript库jQuery提供的一种异步数据通信方式,它允许我们在不刷新整个页面...

    关于Struts2与Jquery实现无刷新分页的不解问题

    Struts2是一个强大的MVC框架,它简化了基于Java的企业级应用程序开发,而jQuery则是一个高效、简洁的JavaScript库,极大地提升了网页开发的效率和用户体验。在本文中,我们将探讨如何在Struts2框架下利用jQuery实现...

    jquery和struts2的整合

    - **动态表格和分页**:Struts2 jQuery插件包含了一些实用组件,如`sj:grid`用于创建动态表格,`sj:pager`实现分页,使得数据展示更加灵活。 **3. 示例应用** 在这个名为`StrutsJqueryDemo`的项目中,开发者创建了...

    struts2 jquery 分页

    Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它提供了强大的控制层逻辑处理能力,而jQuery则是一个高效、简洁的JavaScript库,简化了DOM操作、事件处理和AJAX交互。当这两者结合时,可以...

    struts2+json+jquery实现ajax数据的存取

    "Struts2+JSON+jQuery实现Ajax数据的存取"就是一个典型的示例,它结合了强大的MVC框架Struts2、轻量级的数据交换格式JSON以及高效的前端库jQuery,以实现网页上的无刷新数据交互。下面将详细介绍这三个技术及其在...

    struts2+ajax 发送jquery请求分页,返回josn对象,引用js自动解析

    这里我们探讨的是如何使用Struts2框架配合Ajax(基于jQuery库)发送请求来实现分页功能,并返回JSON对象进行自动解析。 首先,我们需要理解Struts2框架。Struts2是一个基于MVC设计模式的Java Web框架,它提供了处理...

    struts2 jquery无刷新分页

    Struts2 jQuery无刷新分页是一种常见的Web应用技术,它结合了Struts2框架、jQuery库和MySQL数据库,实现了一种高效、用户友好的页面显示方式。无刷新分页允许用户在浏览大量数据时,无需等待整个页面重新加载,只...

    struts2对AJAX的支持

    对于需要分页显示的数据,Struts2 jQuery插件提供了`sj:tabbedpanel`和`sj:datatables`等标签,可以方便地实现AJAX分页加载。 总之,Struts2通过其AJAX插件,为开发者提供了便捷的方式来集成AJAX,提高了Web应用的...

    struts-2.0.12 【lib】包

    5. **Struts2-JQuery Plugin**:类似Struts2-Dojo,它集成了jQuery库,提供了一系列的Ajax和UI组件。 6. **Struts2-DisplayTag Plugin**:集成DisplayTag库,提供表格、分页等功能,便于生成复杂的Web表格。 在...

    图书管理系统-JQuery+Struts2+JDBC

    总的来说,这个系统展示了Web开发中前后端分离、动态数据交互和数据库管理的基本流程,通过结合CSS、JQuery、AJAX、Struts 2和JDBC,实现了高效、易用的图书管理平台。对于学习和理解这些技术的开发者来说,这是一个...

    ajax+struts分页

    本项目是关于“Ajax+Struts”实现分页的一个实例,旨在利用这两种技术的优势,提供一个高效、动态且用户友好的分页解决方案。 首先,让我们来理解一下核心概念: 1. **Ajax(Asynchronous JavaScript and XML)**...

    Struts2 jQuery Ajax 单页面增删改查,附带Mysql数据脚本

    Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们在构建动态、...同时,对于初学者,理解Struts2的配置文件、Action的编写、jQuery的选择器和方法、Ajax的使用,以及如何设计和操作MySQL数据库,都是至关重要的。

    struts2+hibernate(文件批量上传至数据库+Ajax分页显示)

    Ajax分页显示则利用JavaScript和jQuery库,使得页面无需刷新即可获取并展示数据。在后台,Struts2 Action会根据请求参数(如当前页码)查询数据库,并返回一个包含文件信息的集合。前端通过Ajax异步请求这个结果,...

    struts+js,struts+jquery示例

    Struts和JavaScript以及jQuery是Web开发中的重要技术栈,它们在构建...6. 实现交互式Web应用,如AJAX分页、下拉联动、实时搜索等。 理解并掌握这些知识点,开发者可以创建高效、响应式的Web应用,提升用户交互体验。

    struts2 spring2 ibatis2 jquery json 页面无刷新分页

    在页面无刷新分页中,jQuery 用于监听用户的分页操作(如点击按钮),通过Ajax发送异步请求到服务器,获取新页数据,然后动态更新页面内容,实现无刷新效果。同时,jQuery 可以帮助美化分页界面,增加用户体验。 **...

    struts2-ajax

    在Struts2中,Ajax(异步JavaScript和XML)技术的集成使得前端和后端的数据交互变得更加高效,提高了用户体验。"struts2-ajax"这个主题主要关注的是如何在Struts2框架下实现Ajax功能。 首先,让我们了解Struts2中的...

    基于Jquery+Ajax+Json实现分页显示附效果图

    ### 基于JQuery、Ajax与JSON实现分页显示技术解析 #### 技术背景与应用场景 在现代Web开发中,数据展示是一项至关重要的功能。随着数据量的增长,简单的列表展示方式已不能满足用户体验的需求。为了提升用户体验,...

Global site tag (gtag.js) - Google Analytics