ssm+Jquery+Ajax+pagehelper（页面）分页查询（详细步骤）

• 本篇文章分两部分，这是页面部分，还有后端部分。
• <!-- jsp页面实现分页功能必要3个js 。 1.jquery.js    2.jquery.paging.js  3. stringbuffer.js-->
• https://mp.youkuaiyun.com/postedit/82881572  （jquery.js ）
• https://mp.youkuaiyun.com/postedit/82881596  （jquery.paging.js）
• https://blog.youkuaiyun.com/qq_37259112/article/details/82881623  （stringbuffer.js）
• 注：上面js文件可以到相应的官网下载。也可以进入链接后复制到自己新建的js 下，然后引入到需要分页的页面中。
• 下面是精简后的jsp页面。主要理解实现原理和过程。

---

<!--当点击查询，调用queryReassign（）方法，并传入初始页面“1”-->

<input type="button" class="button"  value="查询" οnclick="queryReassign(1);" stype="width:40px" />

 

<script type="text/javascript">
function queryReassign(page){

 $.ajax({
  type : "POST"
  ,url : "${pageContext.request.contextPath}/queryResult.action"
  ,data : {curr_page : page }
  ,dataType : 'json'
  ,async : true
  ,success : function(data){
   $("#queryResult").show();
   var sbHTML = new StringBuffer();
   if(data == "undefined" || data.length <=0 ){
     sbHTML.append("<tr>    \n");
              sbHTML.append("    <td colSpan='3'>没有查询到数据！</td>    \n");
              sbHTML.append("</tr>    \n");
   }else{
    $("#buttonSave").attr("disabled", false);
    $("#applyReassign").attr("disabled",false);
    for(var i=0;i<data.length;i++){
     sbHTML.append("<tr>    \n");
     
                   sbHTML.append("    <td>" + (i+1)+ "</td>    \n");
        sbHTML.append(" <td><input type=\"readonly\" readonly name=\"userid\" id=\"userid"+i+"\" value=\"" + data[i].userid +"\"> </td>    \n");
        sbHTML.append(" <td><input type=\"readonly\" readonly name=\"Name\" id=\"Name"+i+"\" value=\"" + data[i].Name +"\"> </td>    \n");
                  sbHTML.append("</tr>    \n");
    }
   }
     $("#queryResultTR").html(sbHTML.toString());

     <!--下面是隔行变色 listodd 和listeven 需要自己写-->
            $("#queryResultTR tr:nth-child(odd)").addClass("listodd");
            $("#queryResultTR tr:nth-child(even)").addClass("listeven");
           
     <!--分页功能-->
              $('.spci_paging').paging({
                current: (data.length > 0) ? data[0].curr_page : "1"
                   ,max: (data.length > 0) ? data[0].page_size : 1
                   ,onclick: function(e, page) {
                    queryReassign(page);  <!--调用自己方法-->
                   }
               });
  }
 });
}

</script>

<!--是分页功能的样式-->
<style>
 .spci_paging a { display:inline-block; padding:3px 6px; margin:0 6px; border:1px solid #111; background:#fff!important; }
</style>

<from>
 <div id="queryResult" style="display:none;">
  <!-- 查询列表 -->
  <table class="list" cellpadding="2" cellspacing="0" id="queryResultTbl">
   <tr>
    <td class="formtitle" colspan="12"><img src="/claim/images/imgformtitle.gif" align="absmiddle">查询结果列表</td>
   </tr>
   <tr>
    <td  style="width: 4%">序号</td>
    <td  style="width: 48%">用户id</td>
    <td  style="width: 48%">用户名</td>
    
   </tr>
   <tbody id="queryResultTR"/>
  </table>
 </div>
 <!-- 分页功能 -->
 <div class="btn-group spci_paging"></div>
<from>