Jquery简单分页实现方法

前端技术 2023/09/02 JavaScript

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

本文地址：https://www.stayed.cn/item/5039

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案