利用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）;}

复杂点的东西在page_ajax.jsp里头

var ajaxUrl; var showDivName; var ajaxFunctionName; jQuery.extend（{pageAjax: function（url,div,functionName）{ajaxUrl=url;showDivName=div;ajaxFunctionName=functionName;$.ajax（{ url:url, data:{"pageRequest.page":$（"#pagePage"）.val（）,"pageRequest.rows":$（"#pageRows"）.val（）}, dataType: "json", success: function（data）{ eval（functionName+"（data）"）; $.changePageAjax（data）; showWin（div）; }}）;},pageAjaxOfParam: function（url,div,functionName,key,value）{$.ajax（{ url:url, data:{"pageRequest.page":$（"#pagePage"）.val（）,"pageRequest.rows":$（"#pageRows"）.val（）,"key":key,"value":value}, dataType: "json", success: function（data）{ eval（functionName+"（data）"）; $.changePageAjax（data）; showWin（div）; }}）;},changePageAjax: function（data） {var totalCount = data.totalCount;changeDefaultRows（data）;var pageCount = totalCount % parseInt（$（"#pageRows"）.val（））== 0 ?parseInt（totalCount/parseInt（$（"#pageRows"）.val（）））:parseInt（totalCount/parseInt（$（"#pageRows"）.val（）））+1;$（"#totalPage"）.html（pageCount+""）;$（"#totalCount"）.html（totalCount+""）;changeButton（pageCount）;} }）;function changePage（pageTitle） {if（pageTitle == "previous"）{$（"#pagePage"）.val（parseInt（$（"#pagePage"）.val（）） - 1）;}else if（pageTitle == "next"）{$（"#pagePage"）.val（parseInt（$（"#pagePage"）.val（）） + 1）;}else if（pageTitle == "first"）{$（"#pagePage"）.val（1）;}else if（pageTitle == "last"）{var totalCount = parseInt（$（"#totalCount"）.html（））;$（"#pagePage"）.val（parseInt（（totalCount - 1） / parseInt（$（"#pageRows"）.val（）） + ""） + 1）;}go（）; }function goToPointedPage（）{var pointedPageNum = $（"#forwardPageNum"）.val（）;var patrn = /^+?[1-9][0-9]*$/;if（！patrn.exec（pointedPageNum））{alert（"页数请输入正整数"）;return;}if（parseInt（pointedPageNum） > parseInt（$（"#totalPage"）.html（）））{alert（"输入页数不得超过最大页数"）;return;}$（"#pagePage"）.val（parseInt（pointedPageNum））;go（）; }function changeButton（pageCount）{$（"#forwardPageNum"）.val（$（"#pagePage"）.val（））;if（pageCount == 1）{$（"#beforePage"）.attr（"disabled","disabled"）;$（"#firstPage"）.attr（"disabled","disabled"）;$（"#nextPage"）.attr（"disabled","disabled"）;$（"#lastPage"）.attr（"disabled","disabled"）;}else if（$（"#forwardPageNum"）.val（） < pageCount）{ //如果页数比总页数小，则下一页和末页能用$（"#nextPage"）.removeAttr（"disabled"）;$（"#lastPage"）.removeAttr（"disabled"）;if（$（"#forwardPageNum"）.val（） >1）{ //如果页数大于1，说明 1<页数<总页数 说明全部都可用 $（"#firstPage"）.removeAttr（"disabled"）; $（"#beforePage"）.removeAttr（"disabled"）;}else{ //在页数比总页数小的其他情况下，就只存在一种就是等于1 $（"#firstPage"）.attr（"disabled","disabled"）; //当等于1 的时候，首页和上一页不可用 $（"#beforePage"）.attr（"disabled","disabled"）;}} else{$（"#beforePage"）.removeAttr（"disabled"）;$（"#firstPage"）.removeAttr（"disabled"）;$（"#nextPage"）.attr（"disabled","disabled"）;$（"#lastPage"）.attr（"disabled","disabled"）;} }function changeDefaultRows（data）{if（$（"#pageRows"）.val（）==null||$（"#pageRows"）.val（）==""）{$（"#pageRows"）.empty（）;$（"#pageRows"）.append（"<option value=""+data.pAGESIZES[0]+"">默认条数</option><option value=""+data.pAGESIZES[1]+"">"+data.pAGESIZES[1]+"</option><option value=""+data.pAGESIZES[2]+"">"+data.pAGESIZES[2]+"</option>"）;} }function changeRows（）{$（"#pagePage"）.val（1）;go（）; } function go（）{$.pageAjax（ajaxUrl,showDivName,ajaxFunctionName）; }function clearPageInfo（）{$（"#pagePage"）.val（"1"）; }$（function（）{$（"body"）.keydown（function（event）{ if（event.keyCode == 13）{ goToPointedPage（）;}}）; }）;</script> <div class="toolbarScroll"><s:hidden name="pageRequest.page" id="pagePage"/><input id="firstPage" value=" 首页 " type="button" onclick="changePage（"first"）"/><input id="beforePage" value=" 上一页 " type="button" onclick="changePage（"previous"）"/><input size="6" maxlength="3" id="forwardPageNum" class="formStylePage" onblur="goToPointedPage（）" value="" type="text" style="text-align: center;"/>/<span class="currentPage" id="totalPage"></span><input id="nextPage" value=" 下一页 " type="button" onclick="changePage（"next"）"/><input id="lastPage" value=" 末页 " type="button" onclick="changePage（"last"）"/>共<span id="totalCount"></span>条<span><select id="pageRows" name="pageRequest.rows" onchange="changeRows（）"></select></span> </div>

要明白ajax请求的时候是刷新你特定的部门，我一开始就在这里出了问题。其实在做分页的时候，给后台传值，只是当前页和每页的显示个数，其他没了，分页的按钮和下方的列表是分离的，不用去联系，这样能使问题简单。时间有限就这样了，仔细看代码就可以了。
想要了解更多内容请参考专题：《jquery分页功能操作》
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。