为了账号安全,请及时绑定邮箱和手机立即绑定

【jquery模仿net控件】简单分页控件1.0

标签:
JQuery

前言


最近项目需求需要用到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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/Pagination.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.cnblogs.com/03GridView/js/GridViewBase.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.cnblogs.com/03GridView/js/GridColum.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.cnblogs.com/03GridView/js/GridRow.js" type="text/javascript"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 = {                width: '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"  >编辑</span>&nbsp;&nbsp;<span class="delete"  >删除</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);};

复制代码


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消