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

1.后台行为产生json数据。

目录黑名单=black ServiCe。GetBlackInFolist(MobiLenum，gatewayid，startDate，end date)；int totalRows=黑名单。size()；StringBuffer sb=new StringBuffer()；某人（somebody的简写）追加(' { \ ' TotalCount ' : \ ' ' TotalRows ' \ '，')；某人（somebody的简写）追加(' \ ' JSonRoot ' :[')；for(int I=0；iblacklist。size()；i ) { LBlack blackInfo=(LBlack)黑名单。得到(我)；某人（somebody的简写）追加(' { \ ' id ' : \ ' ' BlackInfo。GetiD())；sb.append('\ '，')；某人（somebody的简写）追加(“\”手机“: \”黑色信息。GetMobile())；sb.append('\ '，')；sb . append(\)省份： \ ' '黑色信息。getProvince())；sb.append('\ '，')；某人（somebody的简写）追加(“\”网关“: \”黑色信息。getgateway())；sb.append('\ '，')；某人（somebody的简写）追加(“\”插入时间“: \”黑色信息。getinserttime())；sb.append('\ '，')；sb . append(\)备注： \ ' '黑色信息。GetRemote())；某人（somebody的简写）追加(' \ ')；sb.append('}，')；}某人。删除字符。的最后一个索引('，')；//删去最后一个逗号某人（somebody的简写）追加(']} ')；HttpServletResponse响应=servletactioncontext。getresponse()；回应。setcontenttype(' text/plain ')；response.getWriter().印刷（某人);2.struts.xml相关配置

操作名称='黑名单class='blackAction '方法='黑名单！明文用于显示页面原始代码的结果类型-结果类型='明文param name=' charSet ' utf-8/param param name=' location '/WEB-INF/JSP/manage/black。JSP/param/result/action 3。射流研究…获取json数据分页显示

函数getJSONData(pn){//alert(pn)；$.getJSON('黑名单。ce '，函数（数据){ var总计数=数据。总计数；//总记录数var pageSize=10//每页显示几条记录var page total=数学。天花板(总计数/页面大小)；//总页数var起始页=PageSize *(pn-1)；var结束页面=开始页面页面大小-1；var $ ul=$(' # JSON-list ')；$ ul。empty()；for(var I=0；我页面大小；I){ $ ul。追加(' Li class=' Li-tag '/Li ')；} var dataRoot=data . jsonrootif(page total==1){//当只有一页时for(var j=0；j totalCountj ) { $(' .李标记').等式(j)1 .追加(' span class='col1 '输入类型='复选框'值='' parseInt(j 1) ''//span ').追加(' span class=' col 2 ' ' Parsent(j 1)'/span ').追加(' span class='col3'' dataRoot[j]).移动/span ').追加(' span class='col4'' dataRoot[j]).省/市/自治区)。追加(' span class='col5'' dataRoot[j]).网关/span ').追加(' span class='col6'' dataRoot[j]).插入时间/span ').追加(' span class='col7'' dataRoot[j]).备注/span ')} } else { for(var j=起始页，k=0；j endPage，k pageSizej，k){ if(j==total count){ break；//当遍历到最后一条记录时，跳出循环} $('.李标记').方程式(k)1 .追加(' span class='col1 '输入类型='复选框'值='' parseInt(j 1) ''//span ').追加(' span class=' col 2 ' ' Parsent(j 1)'/span ').追加(' span class='col3'' dataRoot[j]).移动/span ').追加(' span class='col4'' dataRoot[j]).省/市/自治区)。追加(' span class='col5'' dataRoot[j]).网关/span ').追加(' span class='col6'' dataRoot[j]).插入时间/span ').追加(' span class='col7'' dataRoot[j]).备注/span') } } $(' .页数')。文本（总页数);}) }函数getPage() { $ .getJSON('黑名单。ce '，函数（数据){ pn=1；var总计数=数据。总计数；//总记录数var pageSize=10//每页显示几条记录var page total=数学。天花板(总计数/页面大小)；//总页数$('#next ').单击(function(){ if(pn==page TotaL){ alert('后面没有了');pn=page TotaL } else { pngo to page(pn)；} });$('#prev ').单击(函数(){ if (pn==1) { alert('前面没有了');pn=1；} else { pn-；转到页面(pn)；} }) $('#firstPage ').click(function(){ pn=1；转到页面(pn)；});$('#lastPage ').click(function(){ pn=页面总数；转到页面(pn)；});$(' #翻页').单击(函数(){ if($(')).页码')。val()=pageTotal $(' .页码')。val()！=''){ pn=$(' .页码')。val()；转到页面(pn)；}else{ alert('您输入的页码有误!');$('.页码')。val(" ")。焦点();} }) $('#firstPage ').触发器(“点击”)；}) }函数GoToPage(pn){//alert(pn)；$('.当前页面')。文本(pn)；getJSONData(pn)} $(function(){ getPage()；})