假分页：从数据库中取出所有的数据，然后分页在界面上显示。访问一次数据库，但由于选择的数据量比较大，所以第一次花费时间比较长，但之后每一页的显示都是直接、快速的，避免对数据库的多次访问。

真分页：确定要显示的数量和内容，然后每次都去数据库取出该少量数据，优点是数据量小，缺点是访问数据库频繁。

综上:如果数据量较小，使用假分页的效果会更优，如果数据量庞大，使用真分页的效果更优。

实现思路：

假分页是一次性读出表中所有的数据信息:

1.读出所有的信息在JSP页面绘成表格

2.利用JS写相关的函数控制表格的相关行的display属性显示隐藏。

3.具体我们需要知道数据项总条数。每页显示多少条数据。

4.根据以上这两个参数我们可以确定总页数。另外需要我们再定义一个变量作为当前页。

5.我们需要实现的功能是上一页，下一页，首页，尾页，页面跳转。

首页和尾页比较好实现:首页只需要将当前页置为一，再显示第一页数据即可，尾页只需要把当前页数置为尾页，再显示最后一页应该显示的信息项目。

上一页和下一页需要将当前页加1，显示相关页面的数据。

jsp：

  1. <body>
  2.     <table id="t_student" border="1" cellpadding="2" cellspacing="0" style="text-align:center;width:500px">
  3.         <thead>
  4.             <tr>
  5.                 <th>ID</th>
  6.                 <th>姓名</th>
  7.                 <th>年龄</th>
  8.                 <th>电话</th>
  9.                 <th>成绩</th>
  10.             </tr>
  11.         </thead>
  12.    　　.......
    　　
  13.     </table>
  14.     <div class="gridItem" style="padding: 5px; width: 250px; float: left; text-align: left; height: 20px; font-size: 15px;" >
  15.         共有 <span id="spanTotalInfor"></span> 条记录
  16.         当前第<span id="spanPageNum"></span>页
  17.         共<span id="spanTotalPage"></span>页
  18.     </div>
  19.     <div class="gridItem" style="margin-left:50px;  padding: 5px; width: 400px; float: left; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">
  20.             <span id="spanFirst" >首页</span>
  21.             <span id="spanPre">上一页</span>
  22.             <span id="spanInput" style="margin: 0px; padding: 0px 0px 4px 0px; height:100%; ">
  23.                 第<input id="Text1" type="text" class="TextBox" onkeyup="changepage()"   style="height:20px; text-align: center;width:50px" />页
  24.             </span>
  25.             <span id="spanNext">下一页</span>
  26.             <span  id="spanLast">尾页</span>
  27.         </div>
  28.  
  29.     <script type="text/javascript">
  30.             var theTable = document.getElementById("t_student");
  31.             var txtValue = document.getElementById("Text1").value;
  32.             function changepage() {
  33.                 var txtValue2 = document.getElementById("Text1").value;
  34.                 if (txtValue != txtValue2) {
  35.                     if (txtValue2 > pageCount()) {
  36.  
  37.                     }
  38.                     else if (txtValue2 <= 0) {
  39.  
  40.                     }
  41.                     else if (txtValue2 == 1) {
  42.                         first();
  43.                     }
  44.                     else if (txtValue2 == pageCount()) {
  45.                         last();
  46.                     }
  47.                     else {
  48.                         hideTable();
  49.                         page = txtValue2;
  50.                         pageNum2.value = page;
  51.  
  52.                         currentRow = pageSize * page;
  53.                         maxRow = currentRow - pageSize;
  54.                         if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
  55.                         for (var i = maxRow; i < currentRow; i++) {
  56.                             theTable.rows[i].style.display = '';
  57.                         }
  58.                         if (maxRow == 0) { preText(); firstText(); }
  59.                         showPage();
  60.                         nextLink();
  61.                         lastLink();
  62.                         preLink();
  63.                         firstLink();
  64.                    }
  65.  
  66.                     txtValue = txtValue2;
  67.                 }
  68.             }
  69.  
  70.     </script>
  71.     <script type="text/javascript" src="js/Pagging.js"></script>
  72.  
  73. </body>
  74.  
  75. js:
  1. //获取对应控件
  2. var totalPage = document.getElementById("spanTotalPage");//总页数
  3. var pageNum = document.getElementById("spanPageNum");//当前页
  4. var totalInfor = document.getElementById("spanTotalInfor");//记录总数
  5. var pageNum2 = document.getElementById("Text1");//当前页文本框
  6.  
  7. var spanPre = document.getElementById("spanPre");//上一页
  8. var spanNext = document.getElementById("spanNext");//下一页
  9. var spanFirst = document.getElementById("spanFirst");//首页
  10. var spanLast = document.getElementById("spanLast");//尾页
  11. var pageSize = 5;//每页信息条数
  12.  
  13. var numberRowsInTable = theTable.rows.length-1;//表格最大行数
  14.  
  15. var page = 1;
  16.  
  17. //下一页
  18. function next() {
  19.     if (pageCount() <= 1) {
  20.     }
  21.     else {
  22.             hideTable();
  23.             currentRow = pageSize * page + 1; //下一页的第一行
  24.             maxRow = currentRow + pageSize;    //下一页的一行
  25.             if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;//如果计算中下一页最后一行大于实际最后一行行号
  26.             for (var i = currentRow; i < maxRow; i++) {
  27.                 theTable.rows[i].style.display = '';
  28.             }
  29.             page++;
  30.             pageNum2.value = page;
  31.             if (maxRow == numberRowsInTable) { //如果下一页的最后一行是表格的最后一行
  32.                 nextNoLink(); //下一页 和尾页 不点击
  33.                 lastNoLink();
  34.             }
  35.             showPage();//更新page显示
  36.             if (page == pageCount()) {//如果当前页是尾页
  37.                 nextNoLink();
  38.                 lastNoLink();
  39.             }
  40.  
  41.             preLink();
  42.             firstLink();
  43.         }
  44.     }
  45.  
  46. //上一页
  47. function pre() {
  48.     if (pageCount() <= 1) {
  49.     }
  50.     else {
  51.             hideTable();
  52.             page--;
  53.             pageNum2.value = page;
  54.             currentRow = pageSize * page + 1;//下一页的第一行
  55.             maxRow = currentRow - pageSize;//本页的第一行
  56.             if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;//如果计算中本页的第一行小于实际首页的第一行行号，则更正
  57.             for (var i = maxRow; i < currentRow; i++) {
  58.                 theTable.rows[i].style.display = '';
  59.             }
  60.             if (maxRow == 0) { preNoLink(); firstNoLink(); }
  61.             showPage();//更新page显示
  62.             if (page == 1) {
  63.                 firstNoLink();
  64.                 preNoLink();
  65.             }
  66.             nextLink();
  67.             lastLink();
  68.         }
  69.     }
  70.  
  71. //第一页
  72. function first() {
  73.  
  74.     if (pageCount() <= 1) {
  75.     }
  76.     else {
  77.         hideTable();//隐藏所有行
  78.         page = 1;
  79.         pageNum2.value = page;
  80.         for (var i = 1; i < pageSize+1; i++) {//显示第一页的信息
  81.             theTable.rows[i].style.display = '';
  82.         }
  83.         showPage();//设置当前页
  84.  
  85.         firstNoLink();
  86.         preNoLink();
  87.         nextLink();
  88.         lastLink();
  89.     }
  90. }
  91.  
  92. //最后一页
  93. function last() {
  94.     if (pageCount() <= 1) {
  95.     }
  96.     else {
  97.         hideTable();//隐藏所有行
  98.         page = pageCount();//将当前页设置为最大页数
  99.         pageNum2.value = page;
  100.         currentRow = pageSize * (page - 1)+1;//获取最后一页的第一行行号
  101.         for (var i = currentRow; i < numberRowsInTable+1; i++) {//显示表格中最后一页信息
  102.             theTable.rows[i].style.display = '';
  103.         }
  104.  
  105.         showPage();
  106.         lastNoLink();
  107.         nextNoLink();
  108.         preLink();
  109.         firstLink();
  110.     }
  111. }
  112.  
  113. function hideTable() {//隐藏表格内容
  114.     for (var i = 0; i < numberRowsInTable+1; i++) {
  115.         theTable.rows[i].style.display = 'none';
  116.     }
  117.     theTable.rows[0].style.display = '';//标题栏显示
  118. }
  119.  
  120. function showPage() {//设置当前页数
  121.     pageNum.innerHTML = page;
  122. }
  123.  
  124. function inforCount() {//设置总记录数
  125.     spanTotalInfor.innerHTML = numberRowsInTable;
  126. }
  127.  
  128. //总共页数
  129. function pageCount() {
  130.     var count = 0;
  131.     if (numberRowsInTable % pageSize != 0) count = 1;
  132.     return parseInt(numberRowsInTable / pageSize) + count;
  133. }
  134.  
  135. //显示链接 link方法将相应的文字变成可点击翻页的  nolink方法将对应的文字变成不可点击的
  136. function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
  137. function preNoLink(){ spanPre.innerHTML = "上一页"; }
  138.  
  139. function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
  140. function nextNoLink(){ spanNext.innerHTML = "下一页";}
  141.  
  142. function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>"; }
  143. function firstNoLink(){ spanFirst.innerHTML = "首页";}
  144.  
  145. function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>尾页</a>"; }
  146. function lastNoLink(){ spanLast.innerHTML = "尾页";}
  147.  
  148. //初始化表格
  149. function hide() {
  150.     for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) {
  151.         theTable.rows[i].style.display = 'none';
  152.     }
  153.     theTable.rows[0].style.display = '';
  154.  
  155.     inforCount();
  156.  
  157.     totalPage.innerHTML = pageCount();
  158.     showPage();
  159.     pageNum2.value = page;
  160.  
  161.     if (pageCount() > 1) {
  162.         nextLink();
  163.         lastLink();
  164.     }
  165.  
  166. }
  167.  
  168. hide();
  1.  

具体参考 https://www.cnblogs.com/yfsmooth/p/4774326.html

jsp假分页的更多相关文章

  1. jsp 假分页的实现

    原本做毕设做了一堆表格需要读出数据.为了以后的数据可能会很多做准备,这里实现一个以基于jsp页面实现的假分页. 假分页:实际上数据库一次过把所有数据读出来,通过对输出展示的控制来实现对数据分页的假象. ...

  2. Jsp分页实例---假分页

    今天总结一个JSP假分页的实例,由基本功能由js实现. 相较前一篇真分页中程序的功能,丰富了一些.具备首页尾页,和页面跳转功能. 首先还是来总结一下真假分页的优缺点和特性吧. 假分页:从数据库中取出所 ...

  3. 基于jquery 的分页插件，前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  4. 关于asp.net假分页的删除操作的随笔

    作为一个新人,上周负责优化一个后台管理系统,遇到一个问题:点击删除按钮之后,页面又回到了第一页. 而我需要达到的效果是:点击了删除按钮之后,原来是那一页,删除后还是在那一页. 由于项目是已经验收了的, ...

  5. ASP.NET（四）：ASP.net实现假分页显示数据

    导读:在做数据查询的时候,有的时候查询到的数据有很多.通常呢,我们一般都是去拖动右侧边的滚动条.但是,有了分页后,我们就可以不必是使用滚动条,而直接通过分页查看我们想要的数据.在分页的过程中,有分为真 ...

  6. easyUI datagrid 前端假分页

    datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...

  7. java分页之假分页

    假分页,顾名思义,不是真正的在数据库里进行过滤,而是从数据库查询之后,取得全部结果,在展现的时候做些手脚. import java.util.ArrayList; import java.util.L ...

  8. jsp+servlet分页查询

    分页查询 减少服务器内存开销 提高用户体验 效果图 思绪图 分页显示Bean文件代码 package cn.ytmj.findlist.domain; import java.util.List; / ...

  9. easyui-datagrid 假分页

    假分页就是将数据一下全查出来,利用前端来把所有数据进行分页

随机推荐

  1. 如何使用.net开发一款小而美的O2O移动应用？ ——“家庭小秘”APP介绍及采访记录

    “家庭小秘”是一款“互联网+生活服务”平台,为市民家庭提供优质家庭生活服务和企业后勤服务,包含了用户注册.购买预约.订单查询.充值付款.即时通讯等功能. 这款应用已上线至AppStore和安卓的应用商 ...

  2. js之制作简易红绿灯

    HTML代码: 在一个div容器内,设置3个span <body> <div id="i1"> <span class="light red ...

  3. Java 基于ArcFace人脸识别2.0 服务端Demo

    源代码传送:https://github.com/itboyst/ArcSoftFaceDemo 开发环境准备: ###开发使用到的软件和工具: Jdk8.mysql5.7.libarcsoft_fa ...

  4. SwaggerAPI注解详解,以及注解常用参数配置

    注解 @Api: 作用在类上,用来标注该类具体实现内容.表示标识这个类是swagger的资源 . 参数: tags:可以使用tags()允许您为操作设置多个标签的属性,而不是使用该属性. descri ...

  5. SpringMVC归纳-2(Session会话、拦截器)

    要点: 1.HttpSession:一个session的建立是从一个用户向服务器发第一个请求开始,而以用户显式结束或session超时为结束,借助session能在一定时间内记录用户状态. 2.Mod ...

  6. IDEA 最新版永久破解最简单方法（版本 IntelliJ IDEA 2018.3.5）

    版权声明:本文为博主原创文章,仅作为学习交流使用,请在阅读后自行删除, 未经博主允许不得转载.https://www.cnblogs.com/linck/p/10522045.html 1.官网下载专 ...

  7. RPM-GPG-KEY详解

    GPG在Linux上的应用主要是实现官方发布的包的签名机制 GPG分为公钥及私钥 公钥:顾名思意,即可共享的密钥,主要用于验证私钥加密的数据及签名要发送给私钥方的数据 私钥:由本地保留的密钥,用于签名 ...

  8. 最好用的jQuery-Ajax缓存插件

    AJAX-Cache    最好用的jQuery-Ajax缓存插件 介绍 AJAX-Cache是一款jQuery插件,基于localStorage/sessionStorage实现异步请求缓存功能,并 ...

  9. 我的第一个python web开发框架（36）——后台菜单管理功能

    对于后台管理系统来说,要做好权限管理离不开菜单项和页面按钮控件功能的管理.由于程序没法智能的知道有什么菜单和控件,哪些人拥有哪些操作权限,所以首先要做的是菜单管理功能,将需要管理的菜单项和各个功能项添 ...

  10. hadoop wordcout测试

    hadoop wordcout测试 安装好hadoop 环境后,启动HDFS等服务:输密码 1004 start-all.sh 查看启动情况 1006 jps 1007 cd ~ 切换到用户默认目录 ...