Jquery简单分页实现方法 时间：2018-08-10     来源：未知

这篇文章主要介绍了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>