利用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。
也就是这样写即可：
functionpageAjax(){
varurl="${ctx}/system/conProductInfo/listOfAjax.action";
$.pageAjax(url,"productMessageDiv","showList");
}
productMessageDiv:这个就是你预先隐藏的div如下：
<divstyle="display:none;"> <divid="productMessageDiv"class="showParentDiv"style="width:950px;height:400px"> <divid="showProductListMsg"> <divclass="grayBg"> <divid="toolbarScroll"> <span> <inputtype="button"value="确定"onclick="submitProductMessage();"/> <inputtype="button"value="取消"onclick="closeProduct();"/> <inputtype="button"value="查询"onclick="selectProduct();"/> <inputid="value"name="value"type="text"class="width_132"/> <selectid="key"name="key"class="width_115"> </select> </span> </div> <divclass="page"id="page"> <jsp:includepage="/portal/common/page/page_ajax.jsp"/> </div> <divclass="clearFloat"></div> </div> <divclass="scrollInfo"> <divclass="tableInfo"style="overflow-y:scroll;height:365px;"> <tableid="dragTable"border="0"cellpadding="0"cellspacing="0"id="listTable"> <thead> <tr> <tdwidth="4%"> <inputtype="checkbox"id="selectallCheckBox"onclick="selectListall();"/> </td> <tdwidth="%">产品编码</td> <tdwidth="%">产品名称</td> <tdwidth="%">产品型号</td> <tdwidth="%">产品品牌</td> <tdwidth="%">产品分类</td> <tdwidth="%">供应商</td> <tdwidth="%">产品规格</td> </tr> </thead> <tbodyid="msgContent"> </tbody> </table> </div> </div>
showList这个就是你得到回调数据调用的方法：
functionshowList(data){
varlist=data.list;
varstr;
if(list==""||list==null){
str="<tr><tdcolspan=\"9\"><spanclass=\"tip\">系统无纪录!</span></td></tr>";
}else{
for(vari=0;i<list.length;i++){
str=str+"<trid=\"contentTr"+i+"\"><td><inputname=\"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("<optionvalue='productName'>产品名称</option><optionvalue='productCode'>产品编号</option>");
$("#msgContent").empty();
$("#msgContent").append(str);
}
复杂点的东西在page_ajax.jsp里头
varajaxUrl;
varshowDivName;
varajaxFunctionName;
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){
vartotalCount=data.totalCount;
changeDefaultRows(data);
varpageCount=totalCount%parseInt($("#pageRows").val())==0?
parseInt(totalCount/parseInt($("#pageRows").val())):
parseInt(totalCount/parseInt($("#pageRows").val()))+1;
$("#totalPage").html(pageCount+'');
$("#totalCount").html(totalCount+'');
changeButton(pageCount);
}
});
functionchangePage(pageTitle){
if(pageTitle=="previous"){
$('#pagePage').val(parseInt($('#pagePage').val())-1);
}elseif(pageTitle=="next"){
$('#pagePage').val(parseInt($('#pagePage').val())+1);
}elseif(pageTitle=="first"){
$('#pagePage').val(1);
}elseif(pageTitle=="last"){
vartotalCount=parseInt($('#totalCount').html());
$('#pagePage').val(parseInt((totalCount-1)/parseInt($('#pageRows').val())+'')+1);
}
go();
}
functiongoToPointedPage(){
varpointedPageNum=$('#forwardPageNum').val();
varpatrn=/^\+?[1-9][0-9]*$/;
if(!patrn.exec(pointedPageNum)){
alert('页数请输入正整数');
return;
}
if(parseInt(pointedPageNum)>parseInt($('#totalPage').html())){
alert('输入页数不得超过最大页数');
return;
}
$('#pagePage').val(parseInt(pointedPageNum));
go();
}
functionchangeButton(pageCount){
$('#forwardPageNum').val($('#pagePage').val());
if(pageCount==1){
$("#beforePage").attr("disabled","disabled");
$("#firstPage").attr("disabled","disabled");
$("#nextPage").attr("disabled","disabled");
$("#lastPage").attr("disabled","disabled");
}elseif($("#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");
}
}
functionchangeDefaultRows(data){
if($("#pageRows").val()==null||$("#pageRows").val()==""){
$("#pageRows").empty();
$("#pageRows").append("<optionvalue='"+data.pAGESIZES[0]+"'>默认条数</option><optionvalue='"+data.pAGESIZES[1]+"'>"+data.pAGESIZES[1]+"</option><optionvalue='"+data.pAGESIZES[2]+"'>"+data.pAGESIZES[2]+"</option>");
}
}
functionchangeRows(){
$('#pagePage').val(1);
go();
}
functiongo(){
$.pageAjax(ajaxUrl,showDivName,ajaxFunctionName);
}
functionclearPageInfo(){
$("#pagePage").val('1');
}
$(function(){
$("body").keydown(function(event){
if(event.keyCode==13){
goToPointedPage();
}
});
});
</script>
<divclass="toolbarScroll">
<s:hiddenname="pageRequest.page"id="pagePage"/>
<inputid="firstPage"value="首页"type="button"onclick="changePage('first')"/>
<inputid="beforePage"value="上一页"type="button"onclick="changePage('previous')"/>
<inputsize="6"maxlength="3"id="forwardPageNum"class="formStylePage"onblur="goToPointedPage()"value=""type="text"style="text-align:center;"/>/
<spanclass="currentPage"id="totalPage">
</span>
<inputid="nextPage"value="下一页"type="button"onclick="changePage('next')"/>
<inputid="lastPage"value="末页"type="button"onclick="changePage('last')"/>
共<spanid="totalCount"></span>条
<span>
<selectid="pageRows"name="pageRequest.rows"onchange="changeRows()"></select>
</span>
</div>
要明白ajax请求的时候是刷新你特定的部门，我一开始就在这里出了问题。其实在做分页的时候，给后台传值，只是当前页和每页的显示个数，其他没了，分页的按钮和下方的列表是分离的，不用去联系，这样能使问题简单。时间有限就这样了，仔细看代码就可以了。
想要了解更多内容请参考专题：《jquery分页功能操作》
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。