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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 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
php上传大文件失败的原因及应对策略
2015/10/20 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python实现折半查找和归并排序算法
2017/04/14 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
大学生收银员求职信分享
2014/01/02 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
护士自我推荐信范文
2015/03/24 职场文书
孔繁森观后感
2015/06/10 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Java移除无效括号的方法实现
2021/08/07 Java/Android
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers