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 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
动态加载js的方法汇总
Feb 13 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
php下实现折线图效果的代码
2007/04/28 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
MooTools 1.2介绍
2009/09/14 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
理解Python中的With语句
2015/02/02 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
详解Python发送email的三种方式
2018/10/18 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python tornado修改log输出方式
2019/11/18 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python实现单机五子棋
2020/08/28 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
军训学生自我鉴定
2014/02/12 职场文书
职位说明书范文
2014/05/07 职场文书
旅游活动总结
2014/08/27 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android