今天写的 Javascript 异步分页组件

分页的效果如下：

使用方法：

1、页面上要引用

2、页面放放上一个一个放分页组件的元素如：DIV,放一个异步请求回放入要显示数据的元素如 : DIV

　　　　　　　　 -----这是要显示数据的地方

　　　　</div>

　　　　　　----这里是分页组件要显示的地方

　　　　</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);
    }

}

好了就写这么多吧！

来源：https://www.cnblogs.com/red-fox/archive/2012/08/03/2621474.html

标签

分页

var

callback

var函数