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

}

 

好了就写这么多吧！