简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  Jquery+Ajax+Jsonを使ったページング表示の実装方法 非同期ページングを実装するJAVA+JQueryを添付します。

Jquery+Ajax+Jsonを使ったページング表示の実装方法 非同期ページングを実装するJAVA+JQueryを添付します。

高洛峰
高洛峰オリジナル
2017-01-12 09:19:432708ブラウズ

最初に操作レンダリングを示します:

Jquery+Ajax+Jsonを使ったページング表示の実装方法 非同期ページングを実装するJAVA+JQueryを添付します。

1. バックグラウンドアクションにより 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(&#39;<li class="li-tag"></li>&#39;);
    }
    var dataRoot = data.jsonRoot;
    if (pageTotal == 1) {   // 当只有一页时
      for (var j = 0; j < totalCount; j++) {
        $(".li-tag").eq(j).append("<span class=&#39;col1&#39;><input type=&#39;checkbox&#39; value=&#39;"+parseInt(j + 1)+"&#39;/></span>")
        .append("<span class=&#39;col2&#39;>" + parseInt(j + 1)
            + "</span>").append("<span class=&#39;col3&#39;>" + dataRoot[j].mobile
            + "</span>").append("<span class=&#39;col4&#39;>" + dataRoot[j].province
            + "</span>").append("<span class=&#39;col5&#39;>" + dataRoot[j].gateway
            + "</span>").append("<span class=&#39;col6&#39;>" + dataRoot[j].insertTime
            + "</span>").append("<span class=&#39;col7&#39;>" + 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=&#39;col1&#39;><input type=&#39;checkbox&#39; value=&#39;"+parseInt(j + 1)+"&#39;/></span>")
        .append("<span class=&#39;col2&#39;>" + parseInt(j + 1)
            + "</span>").append("<span class=&#39;col3&#39;>" + dataRoot[j].mobile
            + "</span>").append("<span class=&#39;col4&#39;>" + dataRoot[j].province
            + "</span>").append("<span class=&#39;col5&#39;>" + dataRoot[j].gateway
            + "</span>").append("<span class=&#39;col6&#39;>" + dataRoot[j].insertTime
            + "</span>").append("<span class=&#39;col7&#39;>" + 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() != &#39;&#39;){
            pn = $(".page-num").val();
            gotoPage(pn);
          }else{
            alert("您输入的页码有误！");
            $(".page-num").val(&#39;&#39;).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=&#39;ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;&#39; ";
    String preClick=" onclick=&#39;ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;&#39; ";
    String firstClick=" onclick=&#39;ajaxpage(""+this.pageURL+ "?currentPage=1");return false;&#39; ";
    String lastClick=" onclick=&#39;ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;&#39; ";
    String onChange=" onchange=&#39;ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;&#39; ";
    StringBuffer pageString =new StringBuffer();
    pageString.append("<div class=&#39;"+ this.pageStyle +"&#39;><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=&#39;pagination-first&#39; "+firstClick+" title=&#39;首页&#39; href=&#39;" + this.pageURL
              +"?currentPage=1&#39;><<</a> ");
          pageString.append("<a class=&#39;pagination-prev&#39; "+preClick+"title=&#39;上一页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"&#39;><</a> ");
        }else {
          pageString
              .append("<a class=&#39;pagination-first&#39;><<</a> ");
          pageString
              .append("<a class=&#39;pagination-prev&#39;><</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=&#39;ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;&#39; ";
          if(this.currentPage == i) {// 当前页要加粗显示
            pageString
                .append("<strong style=&#39;color:black;border:0&#39;>"
                    + i +"</strong> ");
          }else {
            pageString.append("<a "+numClick+"href=&#39;"+ this.pageURL
                +"?currentPage=" + i + "&#39;>" + i +"</a> ");
          }
        }
        // 如果当前页小于总页数，> >>可用
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class=&#39;pagination-next&#39; "+nextClick+" title=&#39;下一页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"&#39;>></a> ");
          pageString.append("<a class=&#39;pagination-last&#39; "+lastClick+"title=&#39;尾页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"&#39;>>></a> ");
        }else {
          pageString
              .append("<a class=&#39;pagination-next&#39; >></a> ");
          pageString
              .append("<a class=&#39;pagination-last&#39;>>></a> ");
        } 
        pageString.append("<select id=&#39;pageSelect&#39; "+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=&#39;pagination-first&#39; "+firstClick+" title=&#39;首页&#39; href=&#39;" + this.pageURL
              +"?currentPage=1&#39;><<</a> ");
          pageString.append("<a class=&#39;pagination-prev&#39; "+preClick+"title=&#39;上一页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"&#39;><</a> ");
        }else {
          pageString
            .append("<a class=&#39;pagination-first&#39;><<</a> ");
          pageString
            .append("<a class=&#39;pagination-prev&#39;><</a> ");
        }
        pageString.append("<span class=&#39;pageinfo&#39;>第"+this.currentPage+"页/"+this.pageCount+"页</span>");
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class=&#39;pagination-next&#39; "+nextClick+" title=&#39;下一页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"&#39;>></a> ");
          pageString.append("<a class=&#39;pagination-last&#39; "+lastClick+"title=&#39;尾页&#39; href=&#39;" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"&#39;>>></a> ");
        }else {
          pageString
            .append("<a class=&#39;pagination-next&#39; >></a> ");
          pageString
            .append("<a class=&#39;pagination-last&#39;>>></a> ");
        }
        pageString.append("<select id=&#39;pageSelect&#39; "+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 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：AJAX 都道府県市区町村の 3 レベル連携ドロップダウン メニュー (Java 版)次の記事：AJAX 都道府県市区町村の 3 レベル連携ドロップダウン メニュー (Java 版)

関連記事

続きを見る