原生js 定義分頁控制元件,類似于百度搜索

實作一個類似于百度搜索結果的分頁樣式，樣式可以自定義，接近于原生，少部分Jquery ，

1、實作效果截圖（默認無任何樣式）

 2、主要程式代碼

define(function (require, exports, module) {
    /*
    說明:自定義分頁組件
    作者:胡澤云
    日期:2019-01-06
    */
    var index = {
        data: {
            pageSize: 10,    //每頁數量
            total: 100,    //總頁數
            curPage: 1,   //當前頁
            maxPageNum: 10   //視野范圍的數目
        },
       //程式初始化
        init: function (option) {
            var me = this;
            me.option = option;

            me.data.pageSize = option.pageSize;
            me.data.total = option.total;
            if (option.maxPageNum) {
                me.data.maxPageNum = option.maxPageNum;
            }
            me.render(option.containerId);   //containerId 通過init 進行傳遞

　　　　　　　　//me.bind();
         },
        //進行渲染
        render: function (containerId) {
            var html = ""
            var me = this;
            var pageNum = Math.round(me.data.total / me.data.pageSize);
            //取中間值
            var midle = me.data.maxPageNum / 2;
            var beginPage = me.data.curPage - midle;
            var endPage = me.data.curPage + midle - 1;


            //開始邊界處理
            if (beginPage <= 0) {
                beginPage = 1;
            }

            if (endPage < me.data.maxPageNum) {
                endPage += me.data.maxPageNum - endPage;
            }
            //結束邊界
            if (endPage >= pageNum) {
                endPage = pageNum;
            }

            console.log(beginPage + " " + endPage);
            for (var num = beginPage; num <= endPage; num++) {

                if (me.data.curPage == num) {
                    html += "<span name='pageSpan' >" + num + "</span> ";
                }
                else {
                    html += "<a name='page' href='javascript:;' >" + num + "</a> ";
                }
            }
            //上一頁 下一頁
            if (beginPage > 1 && endPage < pageNum) {
                html = "<a id='prePage' href='javascript:;' >上一頁</a> " + html +
                 "<a id='nextPage' href='javascript:;' >下一頁</a>";
            }
            else {
                if (beginPage == 1) {
                    html += " <a id='nextPage' href='javascript:;' >下一頁</a>";
                }
                else if (endPage == pageNum) {
                    html = "<a id='prePage' href='javascript:;' >上一頁</a> " + html;
                }
            }
            html += "<div>總共:" + me.data.total + " 條，" + pageNum + "頁</div>";
            if (containerId) {
                $("#" + containerId).html(html);
            }

            console.log(html);
            //重新系結事件
            me.bind();
            if (me.option.pageChange) {
                //var beginRcordNum = me.data.curPage * this.option.pageSize;
                //var endRcordNum = beginRcordNum + this.option.pageSize;
                me.option.pageChange({
                    curPage: me.data.curPage,
                    //beginRcordNum: beginRcordNum,
                    //endRcordNum: endRcordNum,
                    pageSize: me.data.pageSize
                });
            }

        },
        bind: function () {
            var me = this;
            //系結click 點擊事件
            $("[name='page']").each(function (index, obj) {
                $(obj).on("click", function () {
                    var page = $(obj).text();
                    me.data.curPage = parseInt(page);
                    if (me.option.containerId) {
                        me.render(me.option.containerId);
                    }

                });
            });
            //上下頁
            $("#prePage").on("click", function () {
                me.data.curPage--;
                if (me.option.containerId) {
                    me.render(me.option.containerId);
                }
            })
            //下一頁
            $("#nextPage").on("click", function () {
                me.data.curPage++;
                if (me.option.containerId) {
                    me.render(me.option.containerId);
                }
            })
        }

    };
    exports = module.exports = index;
})

　詳細代碼  https://github.com/huzeyun/jspage/

標籤：JavaScript

上一篇：陣列中所有方法（超詳細）

下一篇：JavaScript insertAdjacentHTML（）的使用