欢迎进入西安甲骨文培训机构 乘车路线| 关于我们| 设为首页| 加入收藏
logo 服务热线
1 2 3 3

新闻动态

联系我们

咨询报名电话:
029-85568080,029-85427081
传真:029-85568080
地址:陕西省西安市长安南路355号华银大厦(西北政法大学老校区对面西安银行南侧)

优秀学员

技术中心 当前位置:首页 > 新闻动态 > 技术中心

西安web前端培训中心讲述如何Jquery简单分页

点击: 时间:2018-8-24

      web前端最主要的作用就是做网站前端页面,做网站肯定要实现页面分页,那么分页该怎么实现,该如何编写呢?下面西安web前端培训中心给我们具体的编写步骤。

               西安web前端培训中心讲述如何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>

      这些就是西安web前端培训中心给我们讲述的具体方法和步骤,希望可以对我们有所帮助,更多专业问题,欢迎来电咨询:029-85568080.