Jquery简单分页实现方法


Posted in Javascript onJuly 24, 2015

本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下:

js代码:

function dolistpage(pagerow,pagenum,rowcount,pagecount){
 $("#pagemsg").html("每页显示"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页 共" +rowcount + "条");
 if (pagenum == 1) {
  $("#fpbtn").attr("disabled", true);
  $("#rpbtn").attr("disabled", true);
 }else {
  $("#fpbtn").removeAttr("disabled");
  $("#rpbtn").removeAttr("disabled");
 }
 if (pagenum == pagecount) {
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
 }else {
  $("#npbtn").removeAttr("disabled");
  $("#lpbtn").removeAttr("disabled");
 }
 $("#fpbtn").click(function(){
  loadtpage(1);
 });
 $("#rpbtn").click(function(){
  loadtpage(pagenum - 1);
 });
 $("#npbtn").click(function(){
  if ((pagenum + 1) >= pagecount) 
   loadtpage(pagecount);
  else
   loadtpage(pagenum + 1);
 });
 $("#lpbtn").click(function(){
  loadtpage(pagecount);
 });
 $("#gpbtn").click(function(){
  var tzys = $("#gpinput").val();
  var re = /^[1-9]+[0-9]*$/;
  if (tzys == null || tzys == undefined || tzys == '') {
   alert("请输入跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (!re.test(tzys)) {
   alert("请输入正确跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (tzys > pagecount) 
   tzys = pagecount;
  if (tzys <= 0) 
   tzys = 1;
  loadtpage(tzys);
 });
 $("#gpinput").val(pagenum);
}

HTML代码:

<table>
 <tfoot>
  <tr>
   <td colspan="11">
    <span class="water-table-listbtn"></span>
    <span class="water-table-page">
     <span id="pagemsg" class="water-table-pagemsg">当前0/0页</span>
     <input type="button" id="fpbtn" value="首页"/>
     <input type="button" id="rpbtn" value="上页"/>
     <input type="button" id="npbtn" value="下页"/>
     <input type="button" id="lpbtn" value="尾页"/>
     <span id="pagemsg" class="water-table-pagemsg">跳转
     <input type="text" id="gpinput" size="3" value="0"/>页
     </span>
     <input type="button" id="gpbtn" value="跳转"/>
    </span>
   </td>
  </tr>
 </tfoot>
</table>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 #Javascript
Css3制作变形与动画效果
Jul 24 #Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 #Javascript
基于JS实现的倒计时程序实例
Jul 24 #Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 #Javascript
javascript比较两个日期相差天数的方法
Jul 24 #Javascript
JAVA四种基本排序方法实例总结
Jul 24 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
前台文员的岗位职责
2013/11/14 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
村庄绿化方案
2014/05/07 职场文书
工资收入证明
2014/10/07 职场文书
2014年网管工作总结
2014/12/11 职场文书
网吧温馨提示
2015/07/17 职场文书
培训简讯范文
2015/07/20 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android