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


Posted in Javascript onFebruary 25, 2016

本文实例讲解了用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程序设计有所帮助。

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
jquery实现图片切换代码
Oct 13 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 #Javascript
You might like
15种PHP Encoder的比较
2007/04/17 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
详解Python发送邮件实例
2016/01/10 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python实现扫描日志关键字的示例
2018/04/28 Python
实例讲解Python3中abs()函数
2019/02/19 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python的faker库用法
2019/11/28 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
实习教师自我鉴定
2013/12/09 职场文书
销售行政专员职责
2014/01/03 职场文书
年终考核评语
2014/01/19 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
大学专科自荐信
2014/06/17 职场文书
公司离职证明标准范本
2014/10/05 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
营业用房租赁协议书
2014/11/26 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript