前言

最近項目需求需要用到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 = {
                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" 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，但是可能沒有必要，因為代碼總的來說還是很水的......

在學習吧......

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【jquery模仿net控件】初步GridView模型實現，及其簡單應用 asp:GridView控件的使用【ASP.NET】GRIDVIEW控件的一般使用技巧 ASP.NET中GridView控件的使用心得 .net core 學習筆記（1）-分頁控件的使用 flutter GridView簡單使用 ASP.NET Repeater控件實現簡單分頁利用aspnetPager控件加存儲過程實現對gridview的分頁 javascript-- 基於jQuery的模仿移動端上拉加載更多控件 [Asp.Net Core] - 使用 ViewComponents 實現分頁控件