前言

最近正式加入了前端坑，看了几篇关于jquery插件的文章，控制不住洪荒之力想自己也写写。点开百度，正好看到了百度的分页看起来挺舒服，于是就它了。纯当练手，如果文章中发现问题，还希望大佬可以指正。

观察

首先我们看看百度分页的图片（并没有给公司打广告）：

图片.png

有兴趣的同学只需要点开百度就行了，经过观察，我们发现他的分页有以下需要注意的地方：

• 单数页码上面的脚印高一点，复数低一点，当前页图片是个logo标志；
• 当前页是第一页不显示上一页，同理最后一页不显示下一页；
• 最多显示10个页码，10个页码以内按顺序展示就行；
• 当前页码大于5小于总页码-4的时候，总是在第六的位置显示（这个逻辑可以自行体验一下）

经过分析，只有最后一个有一些逻辑要写，分析好了要做的东西，下面就开做啦。

代码

首先我们可以简单考虑一下我们做的插件需要对外开放的配置，也是为了拓展性，这里我们在插件中定义了默认的配置：

        var defaults = {
            pageSize: 10,
            count: 100,
            current: 1,
            prevDes: "<上一页",
            nextDes: "下一页>",
            updateSelf: true,
            callback: null
        };
        // 插件配置合并
        this.oConfig = $.extend(defaults, config);
        var self = this;

基于基本需求的考虑，定义了总数count，每页数目pageSize，当前页是第几页current，上一页下一页的文案。由于需求中，我们不一定是点击了页面更新的还是当前的插件，更多的是直接跳转，所以我们添加了标记updateSelf以及点击的反馈回调callback。初始化中我们接收调用者传递的参数config，合并之后使用oConfig。

接下来就是正式根据配置信息绘制我们的页面了，根据我们一开始的观察分析，绘制整个分页插件采用的逻辑如下：

1.判断当前页是否为第一页，不是，则添加上一页元素。

2.遍历绘制页码，那么根据百度分页的逻辑，我们定义遍历的起始和结束变量start和end，总页码数pageCount，当前页码为current：

• 当总页码小于10的时候，start为1，end为pageCount；
• 总页码大于10，当前页码小于等于5，start为1，end为10；
• 总页码大于10，当前页码小于等于总页码数-4，start为pageCount-9，end为pageCount
• 总页码大于10，当前页介于上两个之间，start为current - 5，end为current + 4；

如此一来，遍历的起止位置就有了，然后通过遍历绘制每个页码，当然此处需要判断一下页码的单复数来决定脚印的位置。

3.判断当前页是否为最后一页，不是，则添加下一页元素。

逻辑分析明了了，代码自然就很清晰了，首先是分页插件js的所有代码

(function ($, window) {
    $.fn.CustomPage = function (config) {
        // 默认配置
        var defaults = {
            pageSize: 10,
            count: 100,
            current: 1,
            prevDes: "<上一页",
            nextDes: "下一页>",
            updateSelf: true,
            callback: null
        };
        // 插件配置合并
        this.oConfig = $.extend(defaults, config);
        var self = this;

        // 初始化函数
        var init = function () {
            // 初始化数据
            updateConfig(self.oConfig);
            // 事件绑定
            bindEvent();
        };
        // 更新方法
        var updateConfig = function (config) {
            typeof config.count !== 'undefined' ? self.count = config.count : self.count = self.oConfig.count;
            typeof config.pageSize !== 'undefined' ? self.pageSize = config.pageSize : self.pageSize = self.oConfig.pageSize;
            typeof config.current !== 'undefined' ? self.current = config.current : self.current = self.oConfig.current;
            self.pageCount = Math.ceil(self.count / self.pageSize);
            format();
        };
        var format = function () {
            var current = self.current;
            var count = self.pageCount;
            var html = '<div class="page-container"><ul>';
            if (current != 1)
                html += '<li class="page-item page-prev page-action-text">' + self.oConfig.prevDes + '</li>';
            var start = 1;
            var end = count;
            if (count > 10) {
                if (current <= 5) {
                    start = 1;
                    end = 10;
                } else if (current >= count - 4) {
                    start = count - 9;
                    end = count;
                } else {
                    start = current - 5;
                    end = current + 4;
                }
            }
            for (var i = start; i <= end; i++) {
                html += getItem(i);
            }
            if (current != count)
                html += '<li class="page-item page-next page-action-text">' + self.oConfig.nextDes + '</li>';
            html += '</ul></div>';
            self.html(html);
        };
        var getItem = function (i) {
            var item = '';
            var current = (i == self.current);
            item += '<li class="page-item" data-page="' + i + '"><div class="page-icon-content">';
            if (current) {
                item += '<div class="page-icon-current page-icon-content"></div>';
                item += '</div><span class="page-text-current">' + i + '</span></li>';
            } else {
                item += '<div class="' + (i % 2 == 0 ? 'page-icon-type1' : 'page-icon-type2') + ' page-icon"></div>';
                item += '</div><span class="page-text">' + i + '</span></li>';
            }
            return item;
        };
       //点击事件
        var bindEvent = function () {
            self.on('click', '.page-item', function () {
                var current;
                if ($(this).hasClass('page-prev')) {
                    current = Math.max(1, self.current - 1);
                } else if ($(this).hasClass('page-next')) {
                    current = Math.min(self.pageCount, self.current + 1);
                } else {
                    current = parseInt($(this).data('page'));
                }
                self.oConfig.callback && self.oConfig.callback(current);
                if (self.oConfig.updateSelf) {
                    self.current = current;
                    format();
                }
            })
        };
        // 启动
        init();
        //对外提供更新方法
        this.update = function (config) {
            updateConfig(config);
        };
        // 链式调用
        return self;
    };
})(jQuery, window);

然后是css样式代码，大家随便画画哈：

.page-container {
    color: rgb(0, 0, 204);
    font-size: 14px;
    background-color: white;
}

.page-container ul {
    overflow: hidden;
    display: flex;
    text-align: center;
    justify-content: center;
}

.page-container ul, .page-container li {
    list-style: none;
}

.page-item {
    margin-right: 9px;
}

.page-icon-content {
    width: 36px;
    height: 30px;
}

.page-icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    overflow: hidden;
    border-style:none;
    background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png) no-repeat  -144px -288px;
}

.page-icon-type1 {
    position: relative;
    top: -2px;
}

.page-icon-type2 {
    position: relative;
    top: 3px;
}

.page-icon-current {
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png) no-repeat -96px -288px;
}

.page-text {
    width: 34px;
    height: 34px;
    border: 1px solid #e1e2e3;
    cursor: pointer;
    display: block;
    line-height: 34px;
}

.page-text-current {
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: block;
    line-height: 36px;
}

.page-text:hover,.page-action-text:hover {
    border: 1px solid rgb(0, 0, 204);
}

.page-action-text {
    height: 34px;
    padding: 0 18px;
    border: 1px solid #e1e2e3;
    cursor: pointer;
    display: block;
    line-height: 34px;
    margin-top: 30px;
    background-color: white;

}

最后就是调用者的调用了，我们分为两种情况，自身更新以及跳转更新来应对不同场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿百度分页小插件</title>
    <link rel="stylesheet" href="customPage.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="customPage.js"></script>
    <script>
        $(function () {
            var page = $(".page").CustomPage({
                pageSize: 10,
                count: 160,
                current: 1
            });

            var page2 = $(".page2").CustomPage({
                pageSize: 10,
                count: 120,
                current: 5,
                updateSelf: false,
                callback: function (selected) {
                    alert(selected);
                }
            });

        });
    </script>
</head>
<body>
<div class="page"></div>
<div class="page2"></div>
</body>
</html>

当然你也可以通过page变量来调用我们给外部提供的update方法来更新变化。整个插件的效果如下：

插件展示

附上演示地址：
http://jsrun.net/hPYKp
github地址
https://github.com/bestneville/JqueryPagePlugin