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

jquery-ajax高效分页（mysql版）

AjaxMySQLjQueryjsonStruts 
阅读更多
本文是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：原代码下载:
  
分享到：
| 常用的正则表达式
评论
11 楼 无根V稻草 2011-03-28  
楼主啊 你这个方法是不错哦，就是代码貌似有点不简洁吧
10 楼 bxhwjs 2011-03-24  
jquery这玩意处理后台数据确实不错，处理前端浏览器那就是一个悲剧。。。
9 楼 wucc1986 2011-03-24  
不会写成jQuery插件封装一下的啊
我之前写过一个，但是有个问题一直没解决
一个页面如果有2个分页表格的时候就会冲突。
8 楼 birdbiena 2011-03-24  
a881127b 写道
lkjust08 写道
谢谢LZ分享，写的不错。感觉在web前端的处理有些繁琐，能否简化一些？

我也觉得有不足，这只是项目中备用的解决办法，因为模块化不好，没有被采用，项目中任然用假分页实现，由于太忙，没有在花多少时间想这个。有好的想法可以一起商量。


你写的挺好了,我一直想写一个Jquery的分页,可是一直拖着没写,感觉你写的很不错了,可扩展性还不错.

建议你加上静态查询和静态过滤等功能~

jQuery 完成这些应该不难.
7 楼 leepengyu 2011-03-24  
感觉在web前端处理好麻烦，不如在数据库查询的时候直接就写分页SQL，简单易于维护也方便重用
6 楼 a881127b 2011-03-24  
lkjust08 写道
谢谢LZ分享，写的不错。感觉在web前端的处理有些繁琐，能否简化一些？

我也觉得有不足，这只是项目中备用的解决办法，因为模块化不好，没有被采用，项目中任然用假分页实现，由于太忙，没有在花多少时间想这个。有好的想法可以一起商量。
5 楼 a881127b 2011-03-24  
風一樣的男子 写道
比我之前写的复杂多了

我做的时候也觉得很复杂，而且模块性不好，放在这也是为了好好与大家分享些想法。
4 楼 風一樣的男子 2011-03-24  
比我之前写的复杂多了
3 楼 lkjust08 2011-03-23  
谢谢LZ分享，写的不错。感觉在web前端的处理有些繁琐，能否简化一些？
2 楼 struts 2011-03-23  
不简洁。。。
1 楼 wavelet 2011-03-23  
如果跟数据库绑定。。。就有点。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery-Paging动态分页数据获取插件.zip

    《jQuery-Paging动态分页...总结，jQuery-Paging插件为开发者提供了便捷的动态分页解决方案，通过合理的配置和API调用，可以在项目中实现高效的数据展示。理解并熟练运用这个插件，可以极大地提高网页应用的用户体验。

    jQuery-Paging动态分页数据获取插件

    jQuery-Paging是一款强大的JavaScript插件，专为网页中的动态数据分页设计，它极大地简化了在Web应用中处理大量数据的展示方式。该插件基于流行的JavaScript库jQuery构建，提供了直观且用户友好的分页体验，同时具备...

    jQuery-easyUI pagination分页与普通table结合例子

    jQuery EasyUI是一个基于jQuery的轻量级框架，它提供了一系列的UI组件，包括分页，这对于处理大量数据的展示非常有用。我们将通过一个具体的例子来阐述这个过程。 首先，确保你已经安装了jQuery和jQuery EasyUI库。...

    Jquery Ajax分页（有实例）

    **jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...

    jPage jquery-ajax表格动态分页.zip

    《jPage：jQuery AJAX表格动态分页实现详解》 在网页开发中，数据展示往往涉及到大量的数据处理，尤其是在用户交互时，如何优雅地处理大量数据的分页展示，成为了提升用户体验的关键。jPage是一款基于jQuery的插件...

    asp.net中利用Jquery-Ajax-Json实现无刷新分页的实例代码.doc

    asp.net中利用Jquery-Ajax-Json实现无刷新分页的实例代码.doc

    JQUERY插件--ajax搜索

    **jQuery 插件：Ajax 搜索技术详解** 在现代网页开发中，实时、无刷新的用户体验已经成为提升网站质量的关键因素之一。jQuery 插件利用 Ajax（异步 JavaScript 和 XML）技术，可以实现在用户输入时动态搜索并显示...

    前端项目-jquery-ajaxQueue.zip

    《前端项目：jQuery与ajaxQueue深度解析》 在前端开发中，jQuery库以其简洁的API和强大的功能，一直是开发者们的首选工具之一。本项目“前端项目-jquery-ajaxQueue”聚焦于一个特定的jQuery插件——ajaxQueue，它为...

    基于 jQuery 实现的 Ajax 异步分页

    为了解决这个问题，我们可以采用基于jQuery的Ajax异步分页技术。本篇文章将详细介绍如何利用jQuery实现Ajax异步分页，以及其背后的原理和实践应用。 首先，让我们理解什么是Ajax。AJAX（Asynchronous JavaScript ...

    jquery插件--表格分页

    综上所述，jQuery插件在表格分页中的应用为开发者提供了便利，通过选择合适的插件并结合实际需求进行定制，可以轻松实现高效、美观的分页效果。在实际开发中，应根据项目特性和性能需求，合理选择和配置插件，以达到...

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

    要实现jQuery AJAX分页，我们首先需要在前端创建一个HTML结构，用于展示数据并包含分页链接或按钮。这些链接通常会触发AJAX事件。例如，我们可以使用以下代码创建分页链接： ```html &lt;ul id="pagination"&gt;&lt;/ul&gt; ```...

    jquery+ajax分页

    通过以上步骤，我们可以实现一个基本的jQuery + AJAX分页功能。在实际项目中，根据需求可能还需要考虑更多细节，如分页大小的调整、搜索和排序功能的集成等。总的来说，jQuery与AJAX的结合极大地提高了Web应用的交互...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    **jQueryPager：基于JQuery的Ajax分页插件Pagination实现** 在Web开发中，当数据量庞大时，分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现...

    jQuery分页，纯AJAX分页

    jquery无刷新分页、排序 利用jquery实现的ajax无刷新分页以及排序，支持多种格式无刷新更换，数据库采用的是Sql2000自带的NorthWind数据库 数据库控制使用的是SqlHelper

    Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1

    Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的，因为Pagination 1.5.1与它的低版本有很大的区别，所以在此实例中增加了新版的使用方法

    Jquery-pager

    jQuery-pager 是一个轻量级的JavaScript插件，专为jQuery设计，用于实现无刷新效果的分页功能，通过AJAX技术异步提交请求，使得页面在切换分页时保持动态加载，提高用户体验。 **1. jQuery-pager 的核心原理** ...

    jquery-ias.min.zip

    **jQuery Infinite Ajax Scroll (IAS)** 是一款非常实用的JavaScript插件，主要应用于网页的无限滚动效果，即在用户滚动页面时，内容会自动通过Ajax方式加载，为用户提供无缝的浏览体验。这个插件的核心功能是当用户...

    JQuery autocomplete Ajax分页控件

    总之，jQuery autocomplete与Ajax分页的结合，为Web应用提供了一种高效且用户友好的数据检索和展示方式。这种实现方式需要对jQuery、Ajax和前端分页原理有深入的理解，同时也展示了开发者对优化用户体验的考量。

    jquery+ajax+.net动态分页

    总结起来，这个示例展示了如何整合jQuery、Ajax和.NET技术，利用`jquery.pageFoot.js`插件实现一个高效的后台动态分页解决方案。通过这种方式，用户可以在不离开当前页面的情况下浏览大量数据，提高了网页的交互性和...

Magicbox
Global site tag (gtag.js) - Google Analytics