今天寫的 Javascript 非同步分頁組件

分頁的效果如下：

使用方法：

1、頁面上要引用

<script src="Page.js" type="text/javascript"></script>

2、頁面放放上一個 一個放 分頁組件的 元素 如：DIV,放一個非同步請求回 放入要顯示 資料 的元素 如 : DIV

 　　　　<div id="Result">

 　　　　　　　　 -----這是要顯示資料的地方

　　　　</div> 

　　　　 <div id="pager">

　　　　　　----這裡是分頁組件要顯示的地方

　　　　</div> 

3、分頁的一些初始 設定

　　　　　　//這個是 當使用者點 “上一頁” “下一頁” “首頁” “跳轉” 時要調用的 函數 注意：要放在 SetPage 的前面，

　　　　　　// 裡面的 參數 是當前的頁碼 必須要有的

　　　　 PageClick = function (currentPageIndex) {      

      　　　　　　　　   --- 這裡是你要非同步請求的資料

　　　　　　　　　　　--- 請求回來已後 直接放到  要顯示的地方 如：上面設定 的 ID 為 Result 的DIV 

     　　　　　　  }

 

　　　　　　// 這個函數主要是對分頁做一些初始化，

　　　　　　//第一個參數是 當前是第幾頁

　　　　　　//第二個 參數是 總共多少頁

　　　　　　//第三個 參數是 分頁組件 要顯示的元素的ID 如上面設好的 ID 為 pager 的 DIV 

　　　　　　// 第四個 參數是 當使用者點 “上一頁” “下一頁” “首頁” “跳轉” 時要調用的 函數

             SetPage(1,  PageCount  "pager", PageClick);

4、你可以 對分頁控制項做一些Css 方面的設定

　　　　如：

 　　　　  #pager{font-size:24px;}
  　　　　 #pager {color:#000;text-decoration:none;margin-left:20px;}
 　　　　  #pager :hover{color:#f64d04;border-bottom:2px solid #f64d04;}

        其它Css 放面 就自已看著設定 就行了

===========================Javscript 源碼 (Page.js)===================================

下是我寫的這個分頁組件的 源碼，沒做到封裝，用到了 全域變數 等 ，如果有對你的業務 有用的話。 可以再次封裝一下：

 

var PageIndex = 1;var PageCount = 0;var PageHtml = "";var CallBack; function SetPage(Pindex,Pcount,PageID,CallBackFunc){    PageHtml += "<div class='page'><a href='javascript:void(0);' onclick='PrePage();' id='Pre' >上一頁</a><a href='javascript:void(0);' onclick='NexPage();' id='Nex'>下一頁</a>";    PageHtml += "  轉至 <select style='margin-top:0px;' id='PageJump' name=''  size='1' onchange='PJump();'>";    for (var i = 1; i <= Pcount; i++) {        if (i == Pindex) {            PageHtml += "<option style='height:30px;' value='" + i + "'  SELECTED>" + i + "</option>";                    } else {            PageHtml += "<option value='"+i+"'>" + i + "</option>";                }    }    PageHtml += "</select>   頁<a href='javascript:void(0);' onclick='FirstPage()'>返回首頁</a></div>";    PageCount = Pcount;    PageIndex=Pindex;    var PageNode = document.getElementById(PageID);    PageNode.innerHTML=PageHtml;    CallBack = CallBackFunc;    CallBack(PageIndex);}//上一頁function PrePage() {    PageIndex--;    if (PageIndex <= 0) {        PageIndex = 1;        return;    }    var jumpNode = document.getElementById("PageJump");    jumpNode.value = PageIndex;    CallBack(PageIndex);}// 下一頁function NexPage() {    PageIndex++;    if (PageIndex > PageCount) {        PageIndex = PageCount;        return;    }    var jumpNode = document.getElementById("PageJump");    jumpNode.value = PageIndex;    CallBack(PageIndex);}//跳到第幾頁function PJump() {    var jumpNode = document.getElementById("PageJump");           PageIndex = parseInt(jumpNode.value);    CallBack(PageIndex);}// 第一頁function FirstPage() { if (PageIndex!=1){    PageIndex = 1;    var jumpNode = document.getElementById("PageJump");    jumpNode.value = PageIndex;    CallBack(PageIndex);    }}

 

好了就寫這麼多吧！