欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-22 08:48:49
...
先给大家展示下运行效果图:

使用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实现异步分页相关文章请关注PHP中文网!