45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:Jquery分页的实例分享

Jquery分页的实例分享

2015-08-10 17:51:33 来源:www.45fan.com 【

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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/17339.html
Tags: 实现 jquery 简单
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部