js制作分页

欢迎大家一起交流学习n(*≧▽≦*)n

效果：

图标引入方式为symbol引用

html:

<div class="page" style="margin: 400px;">
</div>
<script src="./js/paging.js"></script>
<script>
    $(".page").Pagination({
        pageSize: 20,
        limits: [10, 20, 30, 40, 50],
        curPage: 1,
        total: 100,
        callback: function (pageSize,curPage) {
            console.log(pageSize,curPage)
        }
    });
</script>

js:

(function ($) {
    $.fn.Pagination = function (options) {
        let config = $.extend({
            pageSize: 20,
            limits: [10, 20, 30, 40, 50],
            total: 100,
            curPage: 1,
            callback: {}
        }, options);
        var $container = $(this);
        var pagination = new Pagination();
        pagination.init($container, config);
        return pagination;
    }

    function Pagination() {
        this.curPage = 1;
        this.pageSize = 0;
        this.totalNum = 1;
        this.totalPage = 1;
    }

    Pagination.prototype = {
        init: function ($container, config) {
            this.$container = $container;
            this.config = config;
            this.totalNum = config.total;
            this.pageSize = config.pageSize;
            this.curPage = config.curPage;
            let limits = config.limits;
            let that = this;
            let $divPage = $('<div