Table假分页

        

         在做BS的项目时，需要在界面显示部分表格信息，当显示大量信息时，为了使界面更美化，很需要进行分页。

       分页的方式有两种：一种真分页；一种假分页。今天我们主要探讨一下假分页。

        假分页又根据控件而不同。若用ASP.NET控件GridView显示数据则分页很简单：将开关打开，并且设置每页显示记录数。在GridView1_PageIndexChanging事件中编写代码：

GridView1.PageIndex = e.NewPageIndex。假分页每次分页显示的时候，总要进行将后台数据全部查询一遍，当数据量很大的时候，再进行分页，这样比较占用资源，或者换页缓慢。但当数据量不大的时候可以使用简单的假分页。

       做项目时，考虑到了兼容性，资源消耗性等问题，决定用html控件table来显示数据。下面介绍用table实现假分页：

<!--分页--> <script>     //获取各个控件的值     var theTable = document.getElementById("mainTable");     //总页数     var totalPage = document.getElementById("spanTotalPage");     //页码     var pageNum = document.getElementById("spanPageNum");     //上一页     var spanPre = document.getElementById("spanPre");     //下一页     var spanNext = document.getElementById("spanNext");     //第一页     var spanFirst = document.getElementById("spanFirst");     //最后一页     var spanLast = document.getElementById("spanLast");     //获取表格的行数     var numberRowsInTable = theTable.rows.length;     //页面显示记录条数     var pageSize = 10;     //      var page = 1;     //下一页     function next() {         //隐藏表格        hideTable();         //当前行数=页面大小*页码         currentRow = pageSize * page;         //最大行数=当前行数+页面大小         maxRow = currentRow + pageSize;         //如果最大行数比表格行数大，最大行数为表格行数         if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;         //         for (var i = currentRow; i < maxRow; i++) {             theTable.rows[i].style.display = '';         }         //页码加一，到下一页         page++;         //最后一页         if (maxRow == numberRowsInTable) { nextText(); lastText(); }         showPage();         preLink();         firstLink();     }     //上一页     function pre() {         hideTable();         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();     }     //第一页     function first() {         hideTable();         page = 1;         for (var i = 0; i < pageSize; i++) {             theTable.rows[i].style.display = '';         }         showPage();         preText();         nextLink();         lastLink();     }     //最后一页     function last() {         hideTable();         page = pageCount();         currentRow = pageSize * (page - 1);         for (var i = currentRow; i < numberRowsInTable; i++) {             theTable.rows[i].style.display = '';         }         showPage();         preLink();         nextText();         firstLink();     }     //表头不能隐藏     //隐藏表格     function hideTable() {         for (var i = 1; i < numberRowsInTable; i++) {             theTable.rows[i].style.display = 'none';         }     }     //显示页     function showPage() {         pageNum.innerHTML = page;     }     //总共页数     function pageCount() {         var count = 0;         if (numberRowsInTable % pageSize != 0) count = 1;         return parseInt(numberRowsInTable / pageSize) + count;     }     //显示链接     function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }     function preText() { spanPre.innerHTML = "上一页"; }     function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }     function nextText() { spanNext.innerHTML = "下一页"; }     function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }     function firstText() { spanFirst.innerHTML = "第一页"; }     function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }     function lastText() { spanLast.innerHTML = "最后一页"; }     //隐藏表格     function hide() {         for (var i = pageSize; i < numberRowsInTable; i++) {             theTable.rows[i].style.display = 'none';         }         totalPage.innerHTML = pageCount();         pageNum.innerHTML = '1';         nextLink();         lastLink();     }     hide();</script>

     简单的分页效果实现了，如图：

      

    通过界面代码，我们可以看出假分页其实是一次性的将所有数据查询出来，通过代码控制显示指定的部分数据行。当数据量比较少的时候这种方式很简洁方便。

    实际情况中，我们应该根据实际情况和用户需求来选定使用的方法。