前端分页3

分页核心：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
</head>
<body>
<script>
    (function () {
        /*当前页*/
        var current = 4;
        /*总页数*/
        var total = 20;
        /*显示的总条数[一般为单数]*/
        var show = 5;
        /*根据显示数量算出正常情况当前页左右各有几个*/
        var x = Math.floor(show / 2);
        var begin = current - x;
        begin = begin < 1 ? 1 : begin;
        var end = begin + show - 1;
        if (end > total) {
            end = total;
            begin = end - show + 1;
            begin = begin > 0 ? begin : 1;
        }

        var pager = document.getElementById("pager");
        var ul = document.createElement('ul');
        pager.appendChild(ul);
        for (var i = begin; i <= end; i++) {
            var li = document.createElement('li');
            li.innerHTML = i;
            ul.appendChild(li);
        }
    })();
</script>
</body>
</html>

封装：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <link rel="stylesheet" href="../../static/bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        #pager {
            margin: 50px 0 0 500px;
        }
    </style>
</head>
<body>
<div style="text-align: center;margin-top: 40px">
    <label>输入当前页:</label><input id="current" type="text" value="1">
    <label>输入总页数:</label><input id="total" type="text" value="28">
    <label>输入每页显示多少条:</label><input id="show" type="text" value="5">
    <button id="create">生成！</button>
</div>
<div id="pager">

</div>
<script src="../../static/jquery/jquery-1.9.1.min.js"></script>
<script>
    class Pager {
        constructor(current, total, show) {
            this.current = current;
            this.total = total;
            this.show = show;
            this.begin = -1;
            this.end = -1;
            this.region = -1;
            let ele = this.createUl();
            this.pager = ele.pager;
            this.ul = ele.ul;
        }

        createUl() {
            var pager = $("#pager");
            var ul = $('<ul></ul>');
            ul.addClass('pagination');
            pager.append(ul);
            return {'pager': pager, 'ul': ul}
        }

        createLia(type, innerHTML) {
            let li = $('<li></li>');
            let a = $('<a></a>');
            switch (type) {
                case 'prev': {
                    let span = $('<span></span>');
                    span.html('&laquo;');
                    a.append(span);
                    li.append(a);
                    if (this.current == 1) {
                        li.addClass('disabled');
                    } else {
                        li.removeClass('disabled');
                    }
                    this.ul.append(li);
                }
                    break;
                case 'next': {
                    let span = $('<span></span>');
                    span.html('&raquo');
                    a.append(span);
                    li.append(a);
                    if (this.current < this.total) {
                        li.removeClass('disabled');
                    } else {
                        li.addClass('disabled');
                    }
                    this.ul.append(li);
                }
                    break;
                default: {
                    a.html(innerHTML);
                    li.append(a);
                    this.ul.append(li);
                }
                    break;
            }
            return li;
        }

        create() {
            this.ul.html('');
            this.ul.append(this.createLia('prev'));
            /*根据显示数量算出正常情况当前页左右各有几个*/
            this.region = Math.floor(this.show / 2);
            this.begin = this.current - this.region;
            this.begin = this.begin < 1 ? 1 : this.begin;
            this.end = this.begin + this.show - 1;
            if (this.end > this.total) {
                this.end = this.total;
                this.begin = this.end - this.show + 1;
                this.begin = this.begin > 0 ? this.begin : 1;
            }

            for (let i = this.begin; i <= this.end; i++) {
                let li = this.createLia('', i);
                if (this.current == i) {
                    li.addClass('active');
                }
                this.ul.append(li);
            }
            this.ul.append(this.createLia('next'));
            this.event();
        }

        setActive(active) {
            this.active = active;
        }

        setCurrent(current) {
            this.current = current;
        }

        setShow(show) {
            this.show = show;
        }

        event() {
            let that = this;
            that.ul.children().each(function (key, value) {
                $(value).on('click', function () {
                    this.index = key;
                    if (this.index == 0) {
                        that.current = that.current - 1 > 0 ? that.current - 1 : 1;
                    } else if (this.index == that.ul.children().length - 1) {
                        that.current = that.current + 1 > that.total ? that.total : that.current + 1;
                    } else {
                        that.current = parseInt($(this).children()[0].innerHTML);
                    }
                    that.create();
                });
            });
        }
    }

    (function () {
        document.querySelector('#create').onclick = function () {
            var current = parseInt(document.querySelector('#current').value);
            var total = parseInt(document.querySelector('#total').value);
            var show = parseInt(document.querySelector('#show').value);
            var pager = new Pager(current, total, show);
            pager.create();
        }
    })();


</script>
</body>
</html>

前进时，请别遗忘了身后的脚印。