今天寫的 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);
    }

}

 

好了就寫這么多吧！