前言

---

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

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

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

截图

---

分页代码使用示例

---

 

分页控件代码

---

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 <= 1) {        this.visible = false;    }};Pagination.prototype.getNumPage = function () {    var cfg = this.cfg;    var pageSize = cfg.pageSize;    var index = this.pageIndex;    var totalPage = this.totalPage;    var pageNum = cfg.pageNum;    var limit = pageNum / 2;    var _limit = parseInt(limit);    limit = limit > _limit ? _limit + 1 : _limit;    var numPage = [];    var numArr = [];    for (var i = 0; i < pageNum; i++) {        if (index < limit) {            numArr.push(i + 1);        } else if (totalPage - index <= limit) {            numArr.push(totalPage - pageNum + i + 1);        } else {            numArr.push(index - limit + i + 2);        }    }    var elStr = '';    var linkTo = cfg.linkTo;    if (linkTo == '#') {        for (var i = 0, len = numArr.length; i < len; i++) {            var tempEl = $('' + 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 < len; i++) {            var tempEl = $('' + 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);};

 

后续

---

由于各方面皆不完整，此处便不作详细说明，有必要的话，以后整理后会形成API，但是可能没有必要，因为代码总的来说还是很水的......

在学习吧......