JavaWeb 逻辑分页示例

迈不过友情╰ 2022-05-13 13:08 267阅读 0赞

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

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

二、分页工具条（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>  
    		<span id="spanPre">上一页</span>  
    		<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>  
    		<span id="spanNext">下一页</span>  
    		<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下面动态引入分页工具条

<div>  
           <c:if test="$\{ re.id != null\}">  
                    <jsp:include page="/internationalFlight/common/pagingToolbar.jsp" ></jsp:include>  
            </c:if>  
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java 逻辑分页和物理分页（mybatis的分页插件PageHelper）

目录 1 逻辑分页和物理分页的区别 2 项目框架展示 2.1 相关技术 2.2 相关依赖和配置 2.2.1 pom依赖 2.2.2 yml配置 2.3 实体类

ゞ浴缸里的玫瑰/ 2024年04月03日 06:54/ 0 赞/ 85 阅读

相关分页业务逻辑

1. 一个分页的逻辑业务。 //把我们拿到的数据组织好，发送ajax拿到符合用户选项的商品列表 ajax_list(data

深藏阁楼爱情的钟/ 2023年08月17日 16:52/ 0 赞/ 121 阅读

相关 JavaWeb笔记--分页

MySQL分页(select \ from student limit 页数\页面大小,页面大小) 分页实现5个（属性）： (1) 数据总数: 查数据库,sel

客官°小女子只卖身不卖艺/ 2023年06月06日 12:26/ 0 赞/ 11 阅读

相关 javaweb实现分页（二）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月23日 14:29/ 0 赞/ 156 阅读

相关 javaweb--layui表格分页

本文最好是有一定javaweb 基础的人查看，你知道，一些最简单的jdbc的实际操作（CRUD）如何写出以待用.css,.js的外部模板的jsp页面；使用最基础的

青旅半醒/ 2022年11月25日 11:50/ 0 赞/ 282 阅读

相关 Javaweb分页技术实现

Javaweb分页技术实现分页技术就是通过SQL语句(如下)来获取数据，具体实现看下面代码 //分页查询语句 select from 表名 wher

心已赠人/ 2022年07月05日 15:01/ 0 赞/ 267 阅读

相关 jsp前台分页逻辑

![20171220210428166][] 如图所示分页逻辑代码： <div class="row"> <div class="p

谁践踏了优雅/ 2022年06月03日 06:25/ 0 赞/ 214 阅读

相关 JavaWeb 逻辑分页示例

一、逻辑分页就是一次性把数据查询出来，然后翻页每次是从内存中取得，翻页的速度快，对于数量量比较小来说很适合，数据量大，最好采用物理分页，防止内存溢出二、分页工具条（p

迈不过友情╰/ 2022年05月13日 13:08/ 0 赞/ 268 阅读

相关数据的物理分页和逻辑分页

实现数据分页的方式可以自己手写sql或者借助mybatis分页插件或者其他插件达到分页的效果。但无论怎样实现分页功能，其实都涉及到物理分页和逻辑分页两个概念。所

以你之姓@/ 2022年03月19日 08:12/ 0 赞/ 277 阅读

相关 javaweb的分页实现

其实分页这一篇本来我是我不想写的，但是下来打算将泛型，为了泛型能够更加的容易理解，所以分页拖到了现在才写。分页的实现有两种方式：　　1.后台获取所有数据，然后通过前端框

爱被打了一巴掌/ 2021年11月10日 12:14/ 0 赞/ 447 阅读