ajax分批mysql_jquery-ajax高效分页（mysql版）

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 list=new ArrayList();

for(int i=0;i

list.add(rm.getColumnName(i+1));

}

for(int i=0;i

sb.append("{");

for(int j=0;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请求代码:

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

jquery-ajax分页

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 += "

" + n.id_t + ""+n.name_t+""+n.reamark_t+""+n.age_t+""+n.hobby_t+" 编辑   查看";

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(" ");

ordertype = 1;

}

else

{

$(".ordertip").empty();

$orderimg.html(" ");

ordertype = 0;

}

}

else

{

$(".ordertip").empty();

$orderimg.html(" ");

ordertype = 1;

}

orderby = ordercolumn+"_"+ordertype;

initData(0);

}

id	name	remark	age	hobby	操作

5:struts.xml代码:

/pageData.jsp

6：原代码下载:

下载次数: 2193

分享到：

2011-03-23 10:56

浏览 8292

论坛回复 / 浏览 (11 / 19626)

评论

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

如果跟数据库绑定。。。就有点。。。