使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图：

 1.后台action产生json数据。

list blacklist = blackservice.getblackinfolist(mobilenum, gatewayid, startdate, enddate); 
int totalrows = blacklist.size(); 
stringbuffer sb = new stringbuffer(); 
     sb.append("{\"totalcount\":\""+totalrows+"\","); 
     sb.append("\"jsonroot\":["); 
     for (int i=0;i<blacklist.size();i++) { 
       lblack blackinfo = (lblack)blacklist.get(i); 
       sb.append("{\"id\":\""+ blackinfo.getid()); 
       sb.append("\",");  
       sb.append("\"mobile\":\""+ blackinfo.getmobile()); 
       sb.append("\",");  
       sb.append("\"province\":\""+ blackinfo.getprovince()); 
       sb.append("\",");  
       sb.append("\"gateway\":\""+ blackinfo.getgateway()); 
       sb.append("\","); 
       sb.append("\"inserttime\":\""+ blackinfo.getinserttime()); 
       sb.append("\","); 
       sb.append("\"remark\":\""+ blackinfo.getremark()); 
       sb.append("\""); 
       sb.append("},"); 
     } 
     sb.deletecharat(sb.lastindexof(",")); // 删去最后一个逗号 
     sb.append("]}");  
     httpservletresponse response = servletactioncontext.getresponse();      
     response.setcontenttype("text/plain"); 
     response.getwriter().print(sb); 

   2.struts.xml相关配置

<action name="blacklist" class="blackaction" method="blacklist"> 
  <!--plaintext用于显示页面原始代码的结果类型--> 
  <result type="plaintext"> 
  <param name="charset">utf-8</param> 
  <param name="location">/web-inf/jsp/manage/black.jsp</param> 
  </result> 
</action> 

3.js获取json数据分页显示

function getjsondata(pn) { 
  // alert(pn); 
  $.getjson("blacklist.ce", function(data) { 
    var totalcount = data.totalcount; // 总记录数 
    var pagesize = 10; // 每页显示几条记录 
    var pagetotal = math.ceil(totalcount / pagesize); // 总页数 
    var startpage = pagesize * (pn - 1); 
    var endpage = startpage + pagesize - 1; 
    var $ul = $("#json-list"); 
    $ul.empty(); 
    for (var i = 0; i < pagesize; i++) { 
      $ul.append('<li class="li-tag"></li>'); 
    } 
    var dataroot = data.jsonroot; 
    if (pagetotal == 1) {   // 当只有一页时 
      for (var j = 0; j < totalcount; j++) { 
        $(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseint(j + 1)+"'/></span>") 
        .append("<span class='col2'>" + parseint(j + 1) 
            + "</span>").append("<span class='col3'>" + dataroot[j].mobile 
            + "</span>").append("<span class='col4'>" + dataroot[j].province 
            + "</span>").append("<span class='col5'>" + dataroot[j].gateway 
            + "</span>").append("<span class='col6'>" + dataroot[j].inserttime 
            + "</span>").append("<span class='col7'>" + dataroot[j].remark 
            + "</span>") 
      } 
    } else { 
      for (var j = startpage, k = 0; j < endpage, k < pagesize; j++, k++) { 
        if( j == totalcount){ 
          break;    // 当遍历到最后一条记录时，跳出循环 
        } 
        $(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseint(j + 1)+"'/></span>") 
        .append("<span class='col2'>" + parseint(j + 1) 
            + "</span>").append("<span class='col3'>" + dataroot[j].mobile 
            + "</span>").append("<span class='col4'>" + dataroot[j].province 
            + "</span>").append("<span class='col5'>" + dataroot[j].gateway 
            + "</span>").append("<span class='col6'>" + dataroot[j].inserttime 
            + "</span>").append("<span class='col7'>" + dataroot[j].remark 
            + "</span>") 
      } 
    } 
    $(".page-count").text(pagetotal); 
  }) 
} 
function getpage() { 
  $.getjson("blacklist.ce", function(data) { 
        pn = 1; 
        var totalcount = data.totalcount; // 总记录数 
        var pagesize = 10; // 每页显示几条记录 
        var pagetotal = math.ceil(totalcount / pagesize); // 总页数 
        $("#next").click(function() { 
              if (pn == pagetotal) { 
                alert("后面没有了"); 
                pn = pagetotal; 
              } else { 
                pn++; 
                gotopage(pn); 
              } 
            }); 
        $("#prev").click(function() { 
              if (pn == 1) { 
                alert("前面没有了"); 
                pn = 1; 
              } else { 
                pn--; 
                gotopage(pn); 
              } 
            }) 
        $("#firstpage").click(function() { 
              pn = 1; 
              gotopage(pn); 
            }); 
        $("#lastpage").click(function() { 
              pn = pagetotal; 
              gotopage(pn); 
            }); 
        $("#page-jump").click(function(){ 
          if($(".page-num").val() <= pagetotal && $(".page-num").val() != ''){ 
            pn = $(".page-num").val(); 
            gotopage(pn); 
          }else{ 
            alert("您输入的页码有误！"); 
            $(".page-num").val('').focus(); 
          } 
        }) 
        $("#firstpage").trigger("click"); 
      }) 
} 
function gotopage(pn) { 
  // alert(pn); 
  $(".current-page").text(pn); 
  getjsondata(pn) 
} 
$(function() { 
  getpage(); 
}) 

ps：java+jquery实现异步分页

最近一个项目要求实现异步分页，简单的写了一下，不好的请指出~

/** 
*分页类 
*/ 
public class pagebean { 
  publicint rowcount = 0; // 总记录数 
  publicint currentpage = 1;// 当前页数 
  publicint sizeperpage = 20;// 每页显示条数 
  publicint pagecount = 0;// 总页数 
  publicstring pageurl;// 请求url 
  publicstring pagedisplay;// jsp页面显示 
  publicstring pagestyle = "numberstyle";// 分页样式 
  publicint pagepreoffset = 10;// 向前偏移量 
  publicint pagenextoffset = 9;// 向后偏移量 
  publicstring pagecss;// 预留 
  publicstring getpagecss() { 
    returnpagecss; 
  } 
  publicvoid setpagecss(string pagecss) { 
    this.pagecss = pagecss; 
  } 
  publicstring getpagestyle() { 
    returnpagestyle; 
  } 
  publicvoid setpagestyle(string pagestyle) { 
    this.pagestyle = pagestyle; 
  } 
  publicint getpagepreoffset() { 
    returnpagepreoffset; 
  } 
  publicvoid setpagepreoffset(intpagepreoffset) { 
    this.pagepreoffset = pagepreoffset; 
  } 
  publicint getpagenextoffset() { 
    returnpagenextoffset; 
  } 
  publicvoid setpagenextoffset(intpagenextoffset) { 
    this.pagenextoffset = pagenextoffset; 
  } 
  publicstring getpagedisplay() { 
    string nextclick=" onclick='ajaxpage(""+this.pageurl+ "?currentpage=" + (this.currentpage + 1)+"");return false;' "; 
    string preclick=" onclick='ajaxpage(""+this.pageurl+ "?currentpage=" + (this.currentpage - 1)+"");return false;' "; 
    string firstclick=" onclick='ajaxpage(""+this.pageurl+ "?currentpage=1");return false;' "; 
    string lastclick=" onclick='ajaxpage(""+this.pageurl+ "?currentpage=" + (this.getpagecount())+"");return false;' "; 
    string onchange=" onchange='ajaxpage(""+this.pageurl+ "?currentpage=" + (1)+"");return false;' "; 
    stringbuffer pagestring =new stringbuffer(); 
    pagestring.append("<div class='"+ this.pagestyle +"'><span >"); 
    // 数字样式 
    if("numberstyle".equalsignorecase(this.pagestyle)) { 
      // 如果只有一页，不需要分页 
      if(this.getpagecount() ==1) { 
        // pagestring.append("<strong> 1</strong> "); 
      }else { 
        if(this.currentpage >1) {// 如果当前页数大于1，<< <可用 
          pagestring.append("<a class='pagination-first' "+firstclick+" title='首页' href='" + this.pageurl 
              +"?currentpage=1'><<</a> "); 
          pagestring.append("<a class='pagination-prev' "+preclick+"title='上一页' href='" + this.pageurl 
              +"?currentpage=" + (this.currentpage -1) 
              +"'><</a> "); 
        }else { 
          pagestring 
              .append("<a class='pagination-first'><<</a> "); 
          pagestring 
              .append("<a class='pagination-prev'><</a> "); 
        } 
        // 定义向前偏移量 
        intpreoffset = this.currentpage -1 > this.pagepreoffset ?this.pagepreoffset 
            :this.currentpage -1; 
        // 定义向后偏移量 
        intnextoffset = this.getpagecount() -this.currentpage >this.pagenextoffset ?this.pagenextoffset 
            :this.getpagecount() -this.currentpage; 
        // 循环显示链接数字，范围是从 当前页减向前偏移量 到 当前页加向后偏移量 
        for(int i = (this.currentpage - preoffset); i <= (this.currentpage + nextoffset); i++) { 
          string numclick=" onclick='ajaxpage(""+this.pageurl+ "?currentpage=" + (i)+"");return false;' "; 
          if(this.currentpage == i) {// 当前页要加粗显示 
            pagestring 
                .append("<strong style='color:black;border:0'>" 
                    + i +"</strong> "); 
          }else { 
            pagestring.append("<a "+numclick+"href='"+ this.pageurl 
                +"?currentpage=" + i + "'>" + i +"</a> "); 
          } 
        } 
        // 如果当前页小于总页数，> >>可用 
        if(this.currentpage <this.getpagecount()) { 
          pagestring.append("<a class='pagination-next' "+nextclick+" title='下一页' href='" + this.pageurl 
              +"?currentpage=" + (this.currentpage +1) 
              +"'>></a> "); 
          pagestring.append("<a class='pagination-last' "+lastclick+"title='尾页' href='" + this.pageurl 
              +"?currentpage=" + (this.getpagecount()) +"'>>></a> "); 
        }else { 
          pagestring 
              .append("<a class='pagination-next' >></a> "); 
          pagestring 
              .append("<a class='pagination-last'>>></a> "); 
        }  
        pagestring.append("<select id='pageselect' "+onchange+">"+this.getoptions()+"</select>"); 
      } 
    }else if("normalstyle".equalsignorecase(this.pagestyle)) { 
      if(this.getpagecount() ==1) { 
        pagestring.append("<strong> 共1页</strong> "); 
      }else { 
        if(this.currentpage >1) { 
          pagestring.append("<a class='pagination-first' "+firstclick+" title='首页' href='" + this.pageurl 
              +"?currentpage=1'><<</a> "); 
          pagestring.append("<a class='pagination-prev' "+preclick+"title='上一页' href='" + this.pageurl 
              +"?currentpage=" + (this.currentpage -1) 
              +"'><</a> "); 
        }else { 
          pagestring 
            .append("<a class='pagination-first'><<</a> "); 
          pagestring 
            .append("<a class='pagination-prev'><</a> "); 
        } 
        pagestring.append("<span class='pageinfo'>第"+this.currentpage+"页/"+this.pagecount+"页</span>"); 
        if(this.currentpage <this.getpagecount()) { 
          pagestring.append("<a class='pagination-next' "+nextclick+" title='下一页' href='" + this.pageurl 
              +"?currentpage=" + (this.currentpage +1) 
              +"'>></a> "); 
          pagestring.append("<a class='pagination-last' "+lastclick+"title='尾页' href='" + this.pageurl 
              +"?currentpage=" + (this.getpagecount()) +"'>>></a> "); 
        }else { 
          pagestring 
            .append("<a class='pagination-next' >></a> "); 
          pagestring 
            .append("<a class='pagination-last'>>></a> "); 
        } 
        pagestring.append("<select id='pageselect' "+onchange+">"+this.getoptions()+"</select>"); 
      } 
    } 
    pagestring.append("</span></div>"); 
    this.pagedisplay = pagestring.tostring(); 
    returnpagedisplay; 
  } 
  publicvoid setpagedisplay(string pagedisplay) { 
    this.pagedisplay = pagedisplay; 
  } 
  publicstring getpageurl() { 
    returnpageurl; 
  } 
  publicvoid setpageurl(string pageurl) { 
    this.pageurl = pageurl; 
  } 
  publicint getpagecount() { 
    this.pagecount =this.rowcount %this.sizeperpage ==0 ? (this.rowcount /this.sizeperpage) 
        : (this.rowcount /this.sizeperpage) +1; 
    returnthis.pagecount; 
  } 
  publicvoid setpagecount(intpagecount) { 
    this.pagecount = pagecount; 
  } 
  publicint getrowcount() { 
    returnrowcount; 
  } 
  publicvoid setrowcount(introwcount) { 
    this.rowcount = rowcount; 
  } 
  publicint getcurrentpage() { 
    returncurrentpage; 
  } 
  publicvoid setcurrentpage(intcurrentpage) { 
    this.currentpage = currentpage; 
  } 
  publicint getsizeperpage() { 
    returnsizeperpage; 
  } 
  publicvoid setsizeperpage(intsizeperpage) { 
    this.sizeperpage = sizeperpage; 
  } 
  privatestring getoptions(){ 
    stringbuffer sb =new stringbuffer(); 
    switch(this.sizeperpage) { 
    case10:   
      sb.append("<option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>"); 
      break; 
    case20: 
      sb.append("<option value=20>20</option><option value=10>10</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>"); 
      break; 
    case30: 
      sb.append("<option value=30>30</option><option value=10>10</option><option value=20>20</option><option value=50>50</option><option value=100>100</option>"); 
      break; 
    case50: 
      sb.append("<option value=50>50</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=100>100</option>"); 
      break; 
    case100: 
      sb.append("<option value=100>100</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option>"); 
      break; 
    } 
    returnsb.tostring(); 
  } 
}

//后台调用 
pagebean page = new pagebean(); 
setpageinfo(list,request); 
public void setpageinfo(list list,httpservletrequest request){ 
    page.setcurrentpage(this.getcurrentpage()); 
    if(request.getparameter("persize")==null){ 
      page.setsizeperpage(20);//default 20 
    } 
    else{ 
      page.setsizeperpage(integer.valueof(request.getparameter("persize"))); 
    } 
    page.setrowcount(list.size()); 
    //page.setpagestyle("normalstyle"); 
    //page.setpagepreoffset(5);//default 10 
    //page.setpagenextoffset(4);//default 9 
    page.setpageurl(request.getrequesturl().tostring()); 
} 
[css] view plaincopyprint?
/** 
**  css 
*/ 
.numberstyle,.normalstyle { 
  text-align:left; 
} 
.numberstyle a,.normalstyle a { 
display: inline-block; 
color: #5489f1;  
text-decoration: none; 
font-size: 14px; 
font-weight:bold; 
font-family: geneva, arial, helvetica, sans-serif; 
border: 1px solid #999; 
width: 20px; 
height: 20px; 
line-height: 20px; 
text-align: center; 
background-position:center; 
} 
.numberstyle strong,.normalstyle strong { 
display: inline-block; 
color: #5489f1;  
text-decoration: none; 
font-size: 14px; 
font-weight:bold; 
font-family: geneva, arial, helvetica, sans-serif; 
border: 1px solid #999; 
width: 20px; 
height: 20px; 
line-height: 20px; 
text-align: center; 
background-position:center; 
} 
.numberstyle a:hover,.normalstyle a:hover{ 
background-color: #d0d0d0; 
} 
.normalstyle .pageinfo{ 
  font-size: 14px; 
  font-family: geneva, arial, helvetica, sans-serif; 
  color: #5489f1; 
} 

[javascript] view plaincopyprint?
/** 
** js import jquery.js before call function 
*/ 
function ajaxpage(action){ 
  action=action+"&persize="+$("#pageselect").val(); 
  $.ajax( { 
  type : "post", 
  url : action, 
  success : function(msg) { 
  //回调函数，后台拼接字符串返回msg 
    //删除原有数据，添加新数据 
    //比如：$("#displaytable>thead").nextall().remove();$("#displaytable").append(msg); 
  } 
  }); 
}

以上就是本文给大家介绍的使用jquery+ajax+json如何实现分页显示附java+jquery实现异步分页，希望对大家有所帮助。