利用jQuery中的ajax分页实现代码

本文实例讲解了用jQuery中的ajax分页相关代码，分享给大家供大家参考，具体内容如下

把分页封装到一个jsp里，那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp
本人封装后，使用者需要在页面中引入page_ajax.jsp，并且在查询列表的时候，点击按钮，调用自定义的方法，如myFunction（），在这个方法里头，调用自己拓展的jquer方法，$.pageAjax(url,functionName,showDIv);
这里的url是你要请求的ajax的url，functionName为你要得到回调数据后处理拼串给tbody动态赋值的方法，而showDIv是你隐藏的div。
也就是这样写即可：

function pageAjax(){
 var url="${ctx}/system/conProductInfo/listOfAjax.action";
 $.pageAjax(url,"productMessageDiv","showList");
 }

productMessageDiv:这个就是你预先隐藏的div如下：

<div style="display: none;">
 <div id="productMessageDiv" class="showParentDiv" style="width:950px;height:400px">
  <div id="showProductListMsg">
   <div class="grayBg">
    <div id="toolbarScroll">
    <span>
     <input type="button" value=" 确定 " onclick="submitProductMessage();"/>
     <input type="button" value=" 取消 " onclick="closeProduct();"/>
     <input type="button" value=" 查询 " onclick="selectProduct();" />
     <input id="value" name="value" type="text" class="width_132"/>
     <select id="key" name="key" class="width_115">
     </select>
    </span>
    </div>
   <div class="page" id="page">
    <jsp:include page="/portal/common/page/page_ajax.jsp"/>
   </div>
   <div class="clearFloat"></div>
   </div>
  <div class="scrollInfo">
   <div class="tableInfo" style="overflow-y:scroll; height:365px;">
    <table id="dragTable" border="0" cellpadding="0" cellspacing="0" id="listTable">
    <thead>
     <tr>
     <td width="4%">
      <input type="checkbox" id="selectallCheckBox" onclick="selectListall();"/>
     </td>
     <td width="%">产品编码</td>
     <td width="%">产品名称</td>
     <td width="%">产品型号</td>
     <td width="%">产品品牌</td>
     <td width="%">产品分类</td>
     <td width="%">供应商</td>
     <td width="%">产品规格</td>
     </tr>
    </thead>
    <tbody id="msgContent"> 
    </tbody>
    </table>
   </div>
  </div> 

showList这个就是你得到回调数据调用的方法：

function showList(data){								 
 1/4    1 2 3 4 下一页 尾页