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

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

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

实现思路:

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

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

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

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

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

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

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

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

jsp:

<body>
<table id="t_student" border="1" cellpadding="2" cellspacing="0" style="text-align:center;width:500px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>成绩</th>
</tr>
</thead>
  .......
  
</table>
<div class="gridItem" style="padding: 5px; width: 250px; 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:50px; padding: 5px; width: 400px; 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 4px 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> <script type="text/javascript">
var theTable = document.getElementById("t_student");
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;
}
} </script>
<script type="text/javascript" src="js/Pagging.js"></script> </body> js:
//获取对应控件
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 = 5;//每页信息条数 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();

具体参考 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. ViewPagerWithImageDemo【ViewPager如何判断滑动到第一页和最后一页以及弹出对话框功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录viewpager滑动的时候弹出对话框的功能(关键功能是滑动弹出对话框后,隐藏对话框的时候当前页可以还原到原位置),顺便判断首页 ...

  2. Docker中完成Jenkins的安装

    去年就开始学习采用Docker+Jenkins+.Net Core搭建生成式流水线,一直拖到现在,也没有彻底的好好静下来去总结总结.趁着现在对自己的严格要求下,逐渐开始重视自我总结,以此来巩固逐渐失去 ...

  3. springboot~ EventListener事件监听的使用

    EventListener事件触发和监听器可以对代码解耦,在一些与业务无关的,通用的操作方法,我们可以把它设计成事件监听器,像通知,消息这些模块都可以这样设计. 事件源 @Getter @Builde ...

  4. Scrum Mastery:产品开发中如何优化产品价值?

    您是否在开发对组织来说有价值的产品?如何判断产品是否有价值? 如果没有经常提出这两个问题,那么您可能忽略了产品价值方面的问题. 产品是目前工作所要达成的目的,是组建团队的原因.产品也是你选择Scrum ...

  5. 简易调色盘控件 for .NET(EN)

    By Conmajia Originally posted in 2012 Introduction Simple & fast implementation of a rectangular ...

  6. linux的一些命令,面试经常碰到的

    1 查询所有java进程ps -A | grep java解释一下这个命令的意思,ps 是查看系统当前进程的命令,参数 -A(注意,是大写,linux中是区分大小写的)是显示所有程序,| 这个是管道符 ...

  7. eclipse复制粘贴变卡的解决办法

    参考这个:https://www.cnblogs.com/o-andy-o/p/4108955.html

  8. 阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配

    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...

  9. off-canvas:抽屉式页面布局的纯css实现

    Off-canvas即抽屉式的侧边导航栏布局,导航栏在大尺寸屏幕的时候可以设置无需隐藏,小尺寸屏幕的时候自动隐藏,并出现.off-canvas-toggle用以打开导航栏,打开导航栏的状态下可以点击非 ...

  10. Golang学习笔记(一)

    这个系列学习文章是对ASTAXIE大神的GoWeb编程的读书笔记. 1. 关于GOPATH $GOPATH 是系统中重要的环境变量,他不是Go的安装目录. 假如我们将GOPATH设置在这里: /hom ...