侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   351

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

 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='//article/" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='//article/" + 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='//article/"+ this.pageURL                 +"?currentPage=" + i + "'>" + i +"</a> ");           }         }         // 如果当前页小于总页数,> >>可用         if(this.currentPage <this.getPageCount()) {           pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='//article/" + 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='//article/" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='//article/" + 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='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='//article/" + 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实现异步分页,希望对大家有所帮助。


  • 上一条:
    Lua下基本的网络编程示例
    下一条:
    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客