利用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){  var list=data.list;   var str;   if(list==""||list==null){   str="<tr><td colspan=/"9/"><span class=/"tip/">系统无纪录!</span></td></tr>";     }else{   for(var i=0;i<list.length;i++){   str=str+" <tr id=/"contentTr"+i+"/"><td><input name=/"selectIds/" type=/"checkbox/" value=/""+list[i].id+"/"/></td><td>"+list[i].productCode+"</td><td>"+list[i].productName+"</td><td>"+list[i].productType+"</td><td>"+list[i].brandName+"</td><td>"+list[i].typeName+"</td><td>"+list[i].companyShortname+"</td><td>"+list[i].productCode+"</td></tr>";   }   }   if($('#key').val()==""||$('#key').val()==null)$('#key').append("<option value='productName'>产品名称</option><option value='productCode'>产品编号</option>");   $("#msgContent").empty();   $("#msgContent").append(str);  }