前言

最近项目需求需要用到jquery的分页功能，所以就自己模仿着其它地方的写了一个，现在配合着原来写的gridview一起使用看看效果。

我们项目有个地方有点痛苦，他不能返回数据的总记录数，这个bug不修复我这边都只能动态附初始值，另外首页尾页等因为刚刚写起皆暂时未实现，

等后面点调整后，有必要便一起发出来。

截图

分页代码使用示例

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                        
    
    
    

分页控件代码

var Pagination = function (_cfg) {    var sender = this;    this.cfg = {        parentEl: $('body'),        pageSize: 10,        pageNum: 7, //每页放几个显示的1,2,3,4        pageEdge: 2,        linkTo: '#',        linkText: 'pageno',        preText: '上一页',        nextText: '下一页',        ellipseText: "...",        pageChaged: function () { return false; }    };    if (_cfg) {        $.each(_cfg, function (key, value) {            sender.cfg[key] = value;        });    }    this.pageIndex = 0;    this.allRow = 0;    this.totalPage = 0;    this.el = null;    this.visible = false;    this.prePage = null;    this.nextPage = null;    this.numPage = null;};Pagination.prototype.render = function () {    this.onInit();    this.preRender();};Pagination.prototype.preRender = function () {    var scope = this;    var prePage = this.prePage;    var nextPage = this.nextPage;    var numPage = this.numPage;    var total = this.totalPage;    var index = this.pageIndex;    prePage.attr('class', 'prev');    if (index == 0) {        prePage.attr('class', 'current prev');    }    nextPage.attr('class', 'next');    if (index == total - 1) {        nextPage.attr('class', 'current next');    }    $.each(numPage, function (i, item) {        item.removeAttr('class');        if (scope.pageIndex == parseInt(item.html()) - 1) {            item.attr('class', 'current');        }    });};Pagination.prototype.onInit = function () {    this.init();    this.initHtml();    this.eventBind();};Pagination.prototype.init = function () {    var cfg = this.cfg;    var totalPage = this.totalPage;    var allRow = this.allRow;    var pageSize = cfg.pageSize;    this.totalPage = allRow % pageSize == 0 ? allRow / pageSize : allRow / pageSize + 1;    this.totalPage = parseInt(this.totalPage);    if (totalPage  _limit ? _limit + 1 : _limit;    var numPage = [];    var numArr = [];    for (var i = 0; i ' + numArr[i].toString() + '');            numPage.push(tempEl)        }    } else {        var linkText = cfg.linkText;        var sign = '?';        if (linkTo.indexOf('?') != -1) {            sign = '&';        }        for (var i = 0, len = numArr.length; i ' + numArr[i].toString() + '');            numPage.push(tempEl);        }    }    return numPage;};Pagination.prototype.initHtml = function () {    var cfg = this.cfg;    var pageInfo = $('
');    var linkTo = cfg.linkTo;    var _pre = '';    var _nex = '';    if (linkTo != '#') {        var linkText = cfg.linkText;        var sign = '?';        if (linkTo.indexOf('?') != -1) {            sign = '&';        }        _pre = '';        _nex = '';    }    var prePage = $(_pre);    var nextPage = $(_nex);    var numPage = this.getNumPage();    pageInfo.append(prePage);    $.each(numPage, function (i, item) {        pageInfo.append(item);    });    pageInfo.append(nextPage);    this.el = pageInfo;    this.prePage = prePage;    this.nextPage = nextPage;    this.numPage = numPage;    cfg.parentEl.append(pageInfo);};Pagination.prototype.eventBind = function (func) {    var scope = this;    var cfg = this.cfg;    var prePage = this.prePage;    var nextPage = this.nextPage;    var numPage = this.numPage;    prePage.unbind('click');    prePage.bind('click', function (e) {        if (scope.pageIndex != 0) {            scope.pageIndex = scope.pageIndex - 1;            scope.pageChanged();        }    });    $.each(numPage, function (i, item) {        item.unbind('click');        item.bind('click', function (e) {            if (scope.pageIndex != parseInt(item.html()) - 1) {                scope.pageIndex = parseInt(item.html()) - 1;                scope.pageChanged();            }        });    });    nextPage.unbind('click');    nextPage.bind('click', function (e) {        if (scope.pageIndex != scope.totalPage - 1) {            scope.pageIndex = scope.pageIndex + 1;            scope.pageChanged();        }    });};Pagination.prototype.pageChanged = function () {    var scope = this;    var cfg = this.cfg;    scope.el.remove();    var pageChaged = cfg.pageChanged;    if (pageChaged && typeof (pageChaged) == 'function') {        pageChaged(this);          }    this.render();    //    alert(this.pageIndex);};