基本的分页实现

本文介绍了一种使用JavaScript实现的页面导航栏功能。通过简单的HTML结构和JavaScript交互,实现了首页、上一页、下一页及末页的翻页效果。适用于网页中需要分页显示数据的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         <div id="table_box" style="height:40px;width:300px;margin:0 auto;padding:0 auto;">
             <table align="center">
                  <tr class="search_table_pageturn" align="center">
                      <td colspan="5" align="center">
<a class="fenye" id='query1' href="#none" pageNo="1" class="updown">首页</a>&nbsp;&nbsp;
<a class="fenye" id='query2' href="#none" pageNo="" class="updown">上一页</a>&nbsp;&nbsp; <a class="fenye" id='query3' href="#none" pageNo="" class="updown">下一页</a>&nbsp;&nbsp; <a class="fenye" id='query4' href="#none" pageNo="" class="updown">末页</a>&nbsp;&nbsp; 共<span class="dred">${searchPagination.pageCount }</span>页&nbsp;&nbsp; 第<span class="pagenum">${searchPagination.cur rentPage } </span>页</td> </tr> </table> </div>

$('.fenye').click(function(){ 
   if($(this).attr('id')=='query1'){
      pageNo=1;
    }
   else if($(this).attr('id')=='query2'){
     if(pageNo==1){
       $('#query2').attr('pageNo',1);
     }else{
       $('#query2').attr('pageNo',--pageNo);
     } 
   }
   else if($(this).attr('id')=='query3'){
     if(pageNo==pageCount){
       $('#query3').attr('pageNo',pageNo);
     }else{
     $('#query3').attr('pageNo',++pageNo);
  }    
  }
  else if($(this).attr('id')=='query4'){
    pageNo=pageCount;
 }
 $("#queryModel").submit();
});

转载于:https://www.cnblogs.com/cornucopia/p/4211003.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值