今天总结一个JSP假分页的实例，由基本功能由js实现。

相较前一篇真分页中程序的功能，丰富了一些。具备首页尾页，和页面跳转功能。

首先还是来总结一下真假分页的优缺点和特性吧。

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

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

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

下面来列举一个假分页的实例。

先简述假分页的实现思路:

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

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

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

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

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

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

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

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

这些功能中，有一点需要格外注意，翻页后控件的能否使用。例如首页时首页和上一页不能使用，尾页时或者当前页最后一条数据为最后一条数据条目时，尾页和下一页不能使用。

源码中有比较详细的注释，此处就不再多做说明。

下面贴出相关源码:

servlet页面代码:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        StudentDao st = new StudentDao();

        request.setAttribute("student",st.findAll());

        request.getRequestDispatcher("student2.jsp").forward(request, response);

    }

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>

    <c:forEach items="${student}" var="st">

        <tr>

            <td>${st.getId()}</td>

            <td>${st.getName()}</td>

            <td>${st.getAge()}</td>

            <td>${st.getPhone()}</td>

            <td>${st.getScore()}</td>

        </tr>

    </c:forEach>

    </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();

Jsp分页实例---假分页的更多相关文章

  1. Jsp分页实例---真分页

    网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给 ...

  2. java分页之假分页

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

  3. PHP+mysql数据库简单分页实例-sql分页

    前几天冷月写了一篇博文<php基础编程-php连接mysql数据库-mysqli的简单使用>,很多小伙伴在学习后都知道了php与mysql数据库的连接,今天冷月分享一个简单的分页实例 首先 ...

  4. asp.mvc中的vue分页实例，分页组件无法重置reload，解决点击查询按钮后，分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  5. jsp 假分页的实现

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

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

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

  7. easyUI datagrid 前端假分页

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

  8. jsp假分页

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

  9. java：（json，ajax，path，Oracle的分页实例，Filter拦截器）

    1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

随机推荐

  1. 带参数的存储过程和标量Function

    在SQL Server中,我们通常会使用NEWID(),GETDATE(),等一些数据库函数,这些函数是很有帮助的,然后数据库也能够让我们自己写函数,即Function,下面简单说说Function的 ...

  2. SAE部署Java应用

    链接地址:http://blog.csdn.net/shuixin536/article/details/9031335 SAE为开发者提供了非常宽松的开发环境,你甚至不用做任何特别定制就能将各种Ja ...

  3. JavaSE学习总结第10天_面向对象5

      10.01 运动员和教练案例分析 教练和运动员案例:运动员分乒乓球运动员和篮球运动员,教练分乒乓球教练和篮球教练.为了出国交流,跟乒乓球相关的人员都需要学习英语. 分析: 10.02 运动员和教练 ...

  4. shell学习之字符串处理

    1.获取字符串长度 value=abcd;echo ${#value} 输出:42.获取子串 value=abcd;:} 输出:d value:a:b,其中a表示起始位置,b表示获取的子串的长度. 3 ...

  5. Linux学习：netstat命令

    Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态等.对于开发来说,很多时候用于查看端口占用情况. 执行netstat命令,其输出结果可以分成两部分: 1)一是“Active ...

  6. [Django实战] 第9篇 - 表单、视图、模型、模板的交互

    本章通过实现一个用户提交任务请求的页面,讲述表单.视图.模型.模板间的交互. 首先,我们需要定义一个表单(forms.py) class CreatetaskForm(forms.Form): cre ...

  7. Save Princess(丑数)

    Save Princess 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 Yesterday, the princess was kidnapped by a de ...

  8. c++中的 堆和栈

    /*用指针p存储堆中的空间时,在将第二块内存空间赋给p之前,我们要释放p原来指向的内存空间, 这样才不会造成内存泄漏,不然的话p原来记录的内存空间就找不到了,而且也无法再次利用 注意:你在使用new以 ...

  9. Oracle自带的exception

    存储过程中自带的exception: --查询人员资料历史 BEGIN SELECT * INTO Po_Sac01 FROM Sac01 WHERE Aac001 = Pi_Aac001 ); EX ...

  10. Centos6.5快速配置可用网卡

    原文链接: Centos6.5快速配置可用网卡 安装完成后,我们启动我们的系统,此时我们的系统,是没有连网的,IP设备,并没有被激活,如果我们使用ifconfig命令查看IP地址,就会发现,此刻的地址 ...