【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试

前言

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

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

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

截图

分页代码使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../css/pagination.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../js/Pagination.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/03GridView/js/GridViewBase.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/03GridView/js/GridColum.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/03GridView/js/GridRow.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/03GridView/js/GridView.js" type="text/javascript"></script>
    <script type="text/javascript">
        //initGrid

        var gridDataBind = function (data) {
            var tb = $("#tb");
            var grid = new GridView();
            grid.style = {
                 '70%'
            };
            grid.attribute = {
                className: 'infolist_hr'
            };
            grid.parentEl = tb;
            grid.dataSource = data;
            grid.colModel = [{
                'th': { 'title': '<input type="checkbox" class="th_select" />', 'attribute': { 'className': 'common'} },
                'td': { 'template': '<input type="checkbox" class="td_select" />', 'style': { 'width': '2%' }, 'attribute': { 'className': 'common indentten'} }
            }, {
                'th': { 'title': '标题', 'attribute': { 'className': 'common'} },
                'td': { 'template': '{%title%}', 'style': { 'width': '40%' }, 'attribute': { 'className': 'common indentten'} }
            }, {
                'th': { 'title': '来源', 'attribute': { 'className': 'common'} },
                'td': { 'template': '{%from%}', 'style': { 'width': '20%' }, 'attribute': { 'className': 'common indentten'} }
            }, {
                'th': { 'title': '时间', 'attribute': { 'className': 'common'} },
                'td': { 'template': '{%created%}', 'style': { 'width': '15%' }, 'attribute': { 'className': 'common indentten'} }
            }, {
                'th': { 'title': '', 'attribute': { 'className': 'common'} },
                'td': { 'template': '<span class="edit" style="cursor: pointer;" >编辑</span>&nbsp;&nbsp;<span class="delete" style="cursor: pointer;" >删除</span>', 'style': { 'width': '13%' }, 'attribute': { 'className': 'common indentten'} }
            }];

            grid.render();
        };
        var bind = function (start, limit) {
            if (!start) {
                start = 0;
            }
            if (!limit) {
                limit = 9;
            }
            var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics?jsonp=?&start=" + start + "&limit=" + limit;
            var tb = $("#tb");
            tb.html("数据正在加载......");
            $.getJSON(url, function (data) {
                tb.html("");
                if (data && typeof (data) == 'string') {
                    data = eval('(' + data + ')');
                } //if
                if (data.data) {
                    data = data.data;
                }

                gridDataBind(data);
               
            }); //$.getJSON(
        };
        var pageChanged = function (page) {
            var start = page.pageIndex * page.cfg.pageSize;
            var limit = page.cfg.pageSize;
            bind(start, limit);
            return false;
        };
        var initPage = function () {
            var page = $('#page');
            var url = "http://113.142.30.139/tpw-webapp/rest/proxy/news_ln_statistics";
            var page = new Pagination({
                parentEl: page,
                pageChanged: pageChanged
            });
            page.allRow = 100;
            page.render();
        };

        $(document).ready(function () {
            bind();
            initPage();
        });      //$(document)
    </script>
</head>
<body>
    <div id="tb">
    </div>
    <div id="page">
    </div>
</body>
</html>

分页控件代码

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 = $('<a href="#">' + numArr[i].toString() + '</a>');
            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 = $('<a href="' + linkTo + sign + linkText + '=' + i.toString() + '">' + numArr[i].toString() + '</a>');
            numPage.push(tempEl);
        }
    }
    return numPage;
};

Pagination.prototype.initHtml = function () {
    var cfg = this.cfg;
    var pageInfo = $('<div class="pagination"></div>');
    var linkTo = cfg.linkTo;
    var _pre = '<a href="#" class="prev">上一页</a>';
    var _nex = '<a href="#" class="next">下一页</a>';
    if (linkTo != '#') {
        var linkText = cfg.linkText;
        var sign = '?';
        if (linkTo.indexOf('?') != -1) {
            sign = '&';
        }
        _pre = '<a href="' + linkTo + sign + linkText + '=' + (parseInt(this.pageIndex) - 1) + '" class="prev">上一页</a>';
        _nex = '<a href="' + linkTo + sign + linkText + '=' + (parseInt(this.pageIndex) + 1) + '" class="next">下一页</a>';

    }

    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，但是可能没有必要，因为代码总的来说还是很水的......

在学习吧......

分类: Web前端

相关阅读:
个体户、独资公司、有限公司、股份公司、控股公司、集团公司
 个人所得税
 移动端下拉滚动刷新
 web页面引入字体
 Flex布局
 NodeJS包管理器之Yarn
域名、顶级域名、一级域名、二级域名、子域名
 JVM线程状态Running、Sleeping、Wait、Park、Monitor
Java虚拟机解释器与JIT编译器
 ASP.NET之Cookie（坑爹的Response.Cookies.Remove）
原文地址：https://www.cnblogs.com/Leo_wl/p/2541067.html