先给大家展示下运行效果图：
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实现异步分页。