数据分页显示（一）

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

一、概述

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

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

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

    未完待续....