数据分页显示（一）

分页显示应用的比较广泛，这里大致讲一下整个的功能实现过程：

一、概述

    整个分页功能的实现大致分这么几个步骤：

        1、前端向服务器发出请求；

        2、服务器查询出数据，发往前端；

        3、前端接收到数据，进行显示。

    额...好像是废话，下面请看对这三个步骤的进一步解说。

二、前端向服务器发出请求

    那么需要发哪些信息给服务器呢？

    我想至少要告诉服务器两个信息：

        a、第几页   

        b、每页显示的记录条数

    实际应用中还可以传递查询条件、排序方式等等。

    前端的分页样式可以是多样的，在这里我们使用的前端样式如下：

    而这么个控件的实现，也需要大概两三百行JS代码，显示样式啊，响应事件啊等等，如下：

$.com.Pager = function (para) {
    // 主容器span
    this.mSpan = $("<span>");
    this.mSpan.addClass("pagedataspan");
    this.mSpan.append("<span>第</span>");

    // 当前页索引span
    this.curInSpan= $("<span>");
    this.mSpan.append(this.curInSpan);

    this.mSpan.append("<span>/</span>");

    // 最大页索引span
    this.maxInSpan = $("<span>");
    this.mSpan.append(this.maxInSpan);

    this.mSpan.append("<span>页</span> <span>总</span>");

    // 总条数span
    this.countSpan = $("<span>");
    this.mSpan.append(this.countSpan);

    this.mSpan.append("<span>条</span> ");

    // 跳转到第一页span
    this.firstSpan = $("<span>");
    this.firstSpan.text("第一页");
    this.mSpan.append(this.firstSpan);

    this.mSpan.append(" ");

    // 跳转到上一页span
    this.pgUpSpan = $("<span>");
    this.pgUpSpan.text("上一页");
    this.mSpan.append(this.pgUpSpan);

    this.mSpan.append(" ");

    // 跳转到下一页span
    this.pgDownSpan = $("<span>");
    this.pgDownSpan.text("下一页");
    this.mSpan.append(this.pgDownSpan);

    this.mSpan.append(" ");

    // 跳转到最后一页span
    this.lastSpan = $("<span>");
    this.lastSpan.text("最后页");
    this.mSpan.append(this.lastSpan);

    this.mSpan.append(" <span>跳转</span>");

    // 跳转到指定页text
    this.jumpText = $("<input>");
    this.jumpText.attr("type", "text");
    this.jumpText.attr("size", 1);
    this.jumpText.attr("maxlength", 8);
    this.jumpText.addClass("pgI");
    this.jumpText.on("keyup", function () { this.value = this.value.replace(/[^\d]/g, ""); });
    this.jumpText.on("beforepaste", function () {
        clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g, ""));
    });
    this.mSpan.append(this.jumpText);

    this.mSpan.append(" ");

    // 跳转到指定页button
    this.jumpBtn = $("<input>");
    this.jumpBtn.attr("type", "button");
    this.jumpBtn.addClass("pgB");
    this.jumpBtn.val("Go");
    this.mSpan.append(this.jumpBtn);

    // 当前页索引
    this.PageIndex = 0;
    // 每页大小
    this.PageSize = (para && para.pgsize) ? para.pgsize : 10;
    // 最大页索引
    this.MaxPageIndex = 0;
    // 总数据量
    this.TotalCount = 0;
    // 获取数据函数
    var getlist = (para && para.getlist) ? para.getlist : false;

    var webPager = this;

    // 绑定跳转至第一页事件
    this.GoToFirst = function () {
        if (getlist) {
            // 调用列表加载方法 加载第一页数据
            this.load(1);
        }
        return false;
    };
    this.firstSpan.on("click", function () {
        // 当前页面已经在第一页不需要再跳转
        if (this.PageIndex < 2) return false;
        return webPager.GoToFirst();
    });

    // 绑定跳转至上一页事件
    this.GoToPre = function () {
        if (getlist) {
            // 当前页索引 减1
            var pgindex = this.PageIndex - 1;
            pgindex = pgindex < 1 ? 1 : pgindex;
            // 调用列表加载方法 加载第pgindex页数据
            this.load(pgindex);
        }
        return false;
    };
    this.pgUpSpan.on("click", function () {
        // 当前页面已经在第一页不需要再跳转
        if (this.PageIndex < 2) return false;
        return webPager.GoToPre();
    });

    // 绑定跳转至下一页事件
    this.GoToNext = function () {
        if (getlist) {
            // 当前页索引 加1
            var pgindex = this.PageIndex + 1;
            // 调用列表加载方法 加载第pgindex页数据
            this.load(pgindex);
        }
        return false;
    };
    this.pgDownSpan.on("click", function () {
        // 当前页面已经是最后一页不需要再跳转
        if (webPager.PageIndex == webPager.MaxPageIndex) return false;
        return webPager.GoToNext();
    });

    // 绑定跳转至最后页事件
    this.GoToLast = function () {
        if (getlist) {
            // 当前页索引 加1乘10
            var pgindex = (this.MaxPageIndex + 1) * 10;
            // 调用列表加载方法 加载第pgindex页数据
            this.load(pgindex);
        }
        return false;
    };
    this.lastSpan.on("click", function () {
        // 当前页面已经是最后一页不需要再跳转
        if (webPager.PageIndex == webPager.MaxPageIndex) return false;
        return webPager.GoToLast();
    });

    // 绑定跳转指定页事件
    this.jumpBtn.on("click", function () {
        if (getlist) {
            // 获取指定页数值
            var pgindex = webPager.jumpText.val();
            webPager.jumpText.val("");
            pgindex = parseInt(pgindex);
            // 判断数值是否合法
            if (isNaN(pgindex)) return false;
            // 调用列表加载方法 加载第pgindex页数据
            webPager.load(pgindex);
        }
        return false;
    });

    // 加载数据 pageindex:加载数据页索引
    this.load = function (pageindex) {
        if (getlist) {
            if (!pageindex) pageindex = 1;
            getlist(pageindex, this.PageSize);
        }
    };

    // 更新分页信息
    this.setPageDataInfo = function (pgInfo) {

        this.PageIndex = pgInfo.PageIndex;
        this.MaxPageIndex = pgInfo.MaxIndex;
        this.TotalCount = pgInfo.TotalCount;

        // 当前页索引
        this.curInSpan.text(pgInfo.PageIndex);
        // 最大页索引
        this.maxInSpan.text(pgInfo.MaxIndex);
        // 数据总条数
        this.countSpan.text(pgInfo.TotalCount);

        // 当前页小于2  不可点击第一页和上一页，将其样式设为不可点击
        if (pgInfo.PageIndex < 2) {
            this.firstSpan.removeClass();
            this.firstSpan.addClass("pgDisable");

            this.pgUpSpan.removeClass();
            this.pgUpSpan.addClass("pgDisable");
        }
        else {
            this.firstSpan.removeClass();
            this.firstSpan.addClass("pgEnable");

            this.pgUpSpan.removeClass();
            this.pgUpSpan.addClass("pgEnable");
        }

        // 当前页等于最大页  不可点击最后页和下一页，将其样式设为不可点击
        if (pgInfo.PageIndex == pgInfo.MaxIndex) {
            this.lastSpan.removeClass();
            this.lastSpan.addClass("pgDisable");

            this.pgDownSpan.removeClass();
            this.pgDownSpan.addClass("pgDisable");
        }
        else {
            this.lastSpan.removeClass();
            this.lastSpan.addClass("pgEnable");

            this.pgDownSpan.removeClass();
            this.pgDownSpan.addClass("pgEnable");
        }
    };

    if (para && para.pObj) this.mSpan.appendTo(para.pObj);

    $.com.setUnSelectText(this.mSpan.get(0));
};

    那么当我们点击页面上的“第一页”、“下一页”、“上一页”...的时候，就相应的把第几页、每页的记录条数等信息发给服务器了。

    未完待续....