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[js]获取url参数的代码
Oct 17 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
jQuery异步提交表单实例
May 30 jQuery
详解vue 模版组件的三种用法
Jul 21 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
JavaScript实现区块链
Mar 14 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
微信小程序实用代码段(收藏版)
Dec 17 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在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python实现最小二乘法线性拟合
2019/07/19 Python
numpy.array 操作使用简单总结
2019/11/08 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
关于幼儿的自我评价
2013/12/18 职场文书
经济管理专业自荐信
2013/12/30 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
高三学习决心书
2014/03/11 职场文书
体育节口号
2014/06/19 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
中班下学期个人总结
2015/02/12 职场文书
新人入职感言
2015/07/31 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js