Jsp分页实例---假分页

今天总结一个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();

posted @ 2015-09-01 13:25 yfsmooth 阅读(8423) 评论(0) 编辑收藏举报

刷新页面返回顶部

君子之守

--潮平帆远，击水三千

Jsp分页实例---假分页