JavaWeb 逻辑分页示例_java数字翻页逻辑-CSDN博客

本文链接：https://blog.csdn.net/m0_38068812/article/details/83343542

一、逻辑分页就是一次性把数据查询出来，然后翻页每次是从内存中取得，翻页的速度快，对于数量量比较小来说

很适合，数据量大，最好采用物理分页，防止内存溢出

二、分页工具条（pagingToolbar.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<div style="font-family:微软雅黑" >
	<div class="gridItem"
		style="padding-left: 55px; width: 450px; padding-top: 5px;  float: left; text-align: left; height: 20px; font-size: 15px;">
		共有
		<span id="spanTotalInfor"></span> 条记录 当前第
		<span id="spanPageNum"></span>页 共
		<span id="spanTotalPage"></span>页
	</div>
	<div class="gridItem"
		style="margin-left: 200px; padding: 5px; width: 450px; float: left; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">
		<span id="spanFirst">首页</span>&nbsp;&nbsp;
		<span id="spanPre">上一页</span>&nbsp;&nbsp;
		<span id="spanInput"
			style="margin: 0px; padding: 0px 0px 0px 0px; height: 100%;">
			第<input id="Text1" type="text" class="TextBox" onkeyup="changepage()"
				style="height: 20px; text-align: center; width: 50px" />页 </span>&nbsp;&nbsp;
		<span id="spanNext">下一页</span>&nbsp;&nbsp;
		<span id="spanLast">尾页</span>
	</div>

</div>

三、分页JS

 <script type="text/javascript">
	  var theTable = document.getElementById("resultTable");
	  var txtValue = document.getElementById("Text1").value;
	  function changepage() {
	      var txtValue2 = document.getElementById("Text1").value;
	      if (txtValue != txtValue2) {
	          if (txtValue2 > pageCount()) {
	          }
	          else if (txtValue2 <= 0) {
	            
	          }
	          else if (txtValue2 == 1) {
	              first();
	          }
	          else if (txtValue2 == pageCount()) {
	              last();
	          }
	          else {
	        	 
	              hideTable();
	              page = txtValue2;
	              pageNum2.value = page;
	
	              currentRow = pageSize * page;
	              maxRow = currentRow - pageSize;
	              if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
	              for (var i = maxRow; i < currentRow; i++) {
	                  theTable.rows[i].style.display = '';
	              }
	              if (maxRow == 0) { preText(); firstText(); }
	              showPage();
	              nextLink();
	              lastLink();
	              preLink();
	              firstLink();
	         }
	
	          txtValue = txtValue2;
	      }
	  }
	
	//获取对应控件
	  var totalPage = document.getElementById("spanTotalPage");//总页数
	  var pageNum = document.getElementById("spanPageNum");//当前页
	  var totalInfor = document.getElementById("spanTotalInfor");//记录总数
	  var pageNum2 = document.getElementById("Text1");//当前页文本框
	
	  var spanPre = document.getElementById("spanPre");//上一页
	  var spanNext = document.getElementById("spanNext");//下一页
	  var spanFirst = document.getElementById("spanFirst");//首页
	  var spanLast = document.getElementById("spanLast");//尾页
	  var pageSize = 10;//每页信息条数
	
	  var numberRowsInTable = theTable.rows.length-1;//表格最大行数
	
	  var page = 1;
	
	  //下一页
	  function next() {
	      if (pageCount() <= 1) {
	      }
	      else {
	              hideTable();
	              currentRow = pageSize * page + 1; //下一页的第一行
	              maxRow = currentRow + pageSize;    //下一页的一行
	              if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;//如果计算中下一页最后一行大于实际最后一行行号
	              for (var i = currentRow; i < maxRow; i++) {
	                  theTable.rows[i].style.display = '';
	              }
	              page++;
	              pageNum2.value = page;
	              if (maxRow == numberRowsInTable) { //如果下一页的最后一行是表格的最后一行
	                 // nextNoLink(); //下一页 和尾页 不点击
	                 // lastNoLink(); 
	              }
	              showPage();//更新page显示
	              if (page == pageCount()) {//如果当前页是尾页
	                  nextNoLink();
	                  lastNoLink();
	              }
	              
	              preLink();
	              firstLink();
	          }
	      }
	
	
	
	  //上一页
	  function pre() {
	      if (pageCount() <= 1) {
	      }
	      else {       
	              hideTable();
	              page--;
	              pageNum2.value = page;
	              currentRow = pageSize * page + 1;//下一页的第一行
	              maxRow = currentRow - pageSize;//本页的第一行
	              if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;//如果计算中本页的第一行小于实际首页的第一行行号，则更正
	              for (var i = maxRow; i < currentRow; i++) {
	                  theTable.rows[i].style.display = '';
	              }
	              if (maxRow == 0) { preNoLink(); firstNoLink(); }
	              showPage();//更新page显示
	              if (page == 1) {
	                  firstNoLink();
	                  preNoLink();
	              }
	              nextLink();
	              lastLink();
	          }
	      }
	
	
	  //第一页
	  function first() {
	      
	      if (pageCount() <= 1) {
	      }
	      else {
	          hideTable();//隐藏所有行
	          page = 1;
	          pageNum2.value = page;
	          for (var i = 1; i < pageSize+1; i++) {//显示第一页的信息
	              theTable.rows[i].style.display = '';
	          }
	          showPage();//设置当前页
	
	          firstNoLink();
	          preNoLink();
	          nextLink();
	          lastLink();
	      }
	  }
	
	
	  //最后一页
	  function last() {
	      if (pageCount() <= 1) {
	      }
	      else {
	          hideTable();//隐藏所有行
	          page = pageCount();//将当前页设置为最大页数
	          pageNum2.value = page;
	          currentRow = pageSize * (page - 1)+1;//获取最后一页的第一行行号
	          for (var i = currentRow; i < numberRowsInTable+1; i++) {//显示表格中最后一页信息
	              theTable.rows[i].style.display = '';
	          }
	
	          showPage();
	          lastNoLink();
	          nextNoLink();
	          preLink();
	          firstLink();
	      }
	  }
	
	
	  function hideTable() {//隐藏表格内容
	      for (var i = 0; i < numberRowsInTable+1; i++) {
	          theTable.rows[i].style.display = 'none';
	      }
	      theTable.rows[0].style.display = '';//标题栏显示
	  }
	
	
	  function showPage() {//设置当前页数
	      pageNum.innerHTML = page;
	  }
	
	  function inforCount() {//设置总记录数
	      spanTotalInfor.innerHTML = numberRowsInTable;
	  }
	
	  //总共页数
	  function pageCount() {
	      var count = 0;
	      if (numberRowsInTable % pageSize != 0) count = 1;
	      return parseInt(numberRowsInTable / pageSize) + count;
	  }
	
	
	  //显示链接 link方法将相应的文字变成可点击翻页的  nolink方法将对应的文字变成不可点击的
	  function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
	  function preNoLink(){ spanPre.innerHTML = "上一页"; }
	
	  function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
	  function nextNoLink(){ spanNext.innerHTML = "下一页";}
	
	  function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>"; }
	  function firstNoLink(){ spanFirst.innerHTML = "首页";}
	
	  function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>尾页</a>"; }
	  function lastNoLink(){ spanLast.innerHTML = "尾页";}
	
	  //初始化表格
	  function hide() {
	      for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) {
	          theTable.rows[i].style.display = 'none';
	      }
	      theTable.rows[0].style.display = '';
	
	      inforCount();
	
	      totalPage.innerHTML = pageCount();
	      showPage();
	      pageNum2.value = page;
	
	      if (pageCount() > 1) {
	          nextLink();
	          lastLink();
	      }
	
	  }
	
	  hide();
	  
  </script>

四.前端代码中引用

JS中 var theTable = document.getElementById("resultTable"); 中id为resultTable，应该与jsp中tableid保持一致，table下面动态引入分页工具条