在做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>
 

     簡單的分頁效果實現了，如圖：

    通過介面程式碼，我們可以看出假分頁其實是一次性的將所有資料查詢出來，通過程式碼控制顯示指定的部分資料行。當資料量比較少的時候這種方式很簡潔方便。

    實際情況中，我們應該根據實際情況和使用者需求來選定使用的方法。