zoukankan html css js c++ java

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

在学习吧......

查看全文

相关阅读:
78. Subsets
93. Restore IP Addresses
71. Simplify Path
82. Remove Duplicates from Sorted List II
95. Unique Binary Search Trees II
96. Unique Binary Search Trees
312. Burst Balloons
程序员社交平台
 APP Store开发指南
 iOS框架搭建（MVC，自定义TabBar）--微博搭建为例

原文地址：https://www.cnblogs.com/yexiaochai/p/2540994.html