原生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/