实现自动翻页,并显示页数

7 篇文章 0 订阅
2 篇文章 0 订阅

实现功能:从数据库读取的数据,要求分页显示,并且每页显示的数据条数可以修改

注意:pagesize,refreshTime是从另一个页面获取的数据

           需要引入js包

      <script type="text/javascript" src="js/jquery.min.js"></script>
	    <script language="javascript">
	    var pagesize = <%= pagesize %>;
	    var current_end_no = <%= pagesize %>;
	    var current_no = 1;
	    var total_size = <%= listdao.getSqlList().size()%>;
	    var refreshTime =<%= refreshTime %> 
	    var pagination = 0;
	    var total_pagination = Math.ceil(total_size/pagesize);
		function dispay() 
		{


			for(var i = 1;i <= total_size;i++)
			{
				var id = "#"+i;
				if(i < current_no || i > current_end_no){
					$(id).hide();
				}else{
					$(id).show();
				}
			}
			if(current_no + pagesize > total_size){
				current_no = 1;
				current_end_no = pagesize;
				pagination = total_pagination;
			}else{
				current_no = current_no + pagesize;
				current_end_no = current_end_no + pagesize;
				if(pagination== total_pagination){
					pagination = 0;
				}
				pagination = pagination + 1;
			}
			$("#pagination").html(pagination);
			$("#total_pagination").html(total_pagination);
			
		}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,可以实现自动翻页功能: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>自动翻页示例</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ var currentPage = 1; var totalPages = 5; $("#nextBtn").click(function(){ if(currentPage < totalPages){ currentPage++; $("#page" + currentPage).show(); $("#page" + (currentPage - 1)).hide(); } }); $("#prevBtn").click(function(){ if(currentPage > 1){ currentPage--; $("#page" + currentPage).show(); $("#page" + (currentPage + 1)).hide(); } }); }); </script> <style> .page{ display: none; } </style> </head> <body> <div id="page1" class="page"> <h1>第一页</h1> <p>这是第一页的内容</p> </div> <div id="page2" class="page"> <h1>第二页</h1> <p>这是第二页的内容</p> </div> <div id="page3" class="page"> <h1>第三页</h1> <p>这是第三页的内容</p> </div> <div id="page4" class="page"> <h1>第四页</h1> <p>这是第四页的内容</p> </div> <div id="page5" class="page"> <h1>第五页</h1> <p>这是第五页的内容</p> </div> <button id="prevBtn">上一页</button> <button id="nextBtn">下一页</button> </body> </html> ``` 上面的代码中,我们使用了 jQuery 库来简化 JavaScript 代码的编写。在页面加载完成后,我们定义了两个变量 `currentPage` 和 `totalPages` 分别表示当前页码和总页数。我们绑定了 `nextBtn` 和 `prevBtn` 两个按钮的点击事件,在点击时更新当前页码,并显示相应的页面内容,同时隐藏前一页或后一页的内容。所有的页面内容都被定义为一个 `class` 为 `page` 的 `div` 元素,并且在 CSS 中设置为不可见。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值