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>

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

      

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

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