Jquery简单分页实现方法

 更新时间:2015年07月24日 15:40:42   作者:罪恶的花生  
这篇文章主要介绍了Jquery简单分页实现方法,实例分析了jquery分页的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

相关文章

  • 创建公共调用 jQuery Ajax 带返回值

    创建公共调用 jQuery Ajax 带返回值

    请求Ajax 带返回值,并弹出提示框提醒的实现代码,需要的朋友可以参考下
    2012-08-08
  • jquery实现增加删除行的方法

    jquery实现增加删除行的方法

    这篇文章主要介绍了jquery实现增加删除行的方法,涉及表格中行的增加与删除技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery实现视频展示效果

    jQuery实现视频展示效果

    这篇文章主要为大家详细介绍了jQuery实现视频展示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • jQuery拖拽插件gridster使用指南

    jQuery拖拽插件gridster使用指南

    gridster.js是一款基于jquery的前端拖拽插件,效果相当的不错,大家可以先看看Demo(http://gridster.net/#intro)(蓝色部分的白块就是了,可以随便拖动,娱乐性很强)。
    2015-04-04
  • jQuery实现两款有动画功能的导航菜单代码

    jQuery实现两款有动画功能的导航菜单代码

    这篇文章主要介绍了jQuery实现两款有动画功能的导航菜单代码,涉及jQuery动画效果的不同实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery实现导航回弹效果

    jQuery实现导航回弹效果

    本文主要介绍了jQuery实现导航回弹效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jquery插件实现仪表盘

    jquery插件实现仪表盘

    这篇文章主要为大家详细介绍了jquery插件实现仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery页面刷新(局部、全部)问题分析

    jQuery页面刷新(局部、全部)问题分析

    这篇文章主要针对jQuery页面刷新问题为大家进行详细分析,包括局部刷新、全部刷新,感兴趣的朋友可以参考一下
    2016-01-01
  • jQuery实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    这篇文章主要介绍了jQuery实现带延迟效果的滑动菜单,涉及jquery鼠标事件操作页面属性定时变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • cookie.js 加载顺序问题怎么才有效

    cookie.js 加载顺序问题怎么才有效

    在使用cookie.js时,只有在jquery.js文件后加载整体才有效,下面与大家分享下有效加载顺序,有此需求的朋友可以参考下
    2013-07-07

最新评论