jq分页功能。

Posted 2020-12-18 opcec

最近在写官网的分页功能。在网上找了很多案例都太复杂也太重。所以准备写一个简单一点的分页。

需求：把请求到的数据做分页。

准备：使用了网上一个简单的分页插件。

思路：分页相当于tab切换功能。具体实操把数组拆分成若干个数组。这样每个数组就是所需要的每个分页的内容。然后把所有的数组塞到一个对象中就是分页所需要的内容。

上代码

分页插件：

!(function(t, a, e, i) {
    var n = function(a, e) {
        this.ele = a,
        this.defaults = {
            currentPage: 1,
            totalPage: 10,
            isShow: !0,
            count: 5,
            homePageText: ‘首页‘,
            endPageText: ‘尾页‘,
            prevPageText: ‘上一页‘,
            nextPageText: ‘下一页‘,
            callback: function() {}
        },
        this.opts = t.extend({}, this.defaults, e),
        this.current = this.opts.currentPage,
        this.total = this.opts.totalPage,
        this.init();
    };
    n.prototype = {
        init: function() {
            this.render(),
            this.eventBind();
        },
        render: function() {
            var t = this.opts;
            var a = this.current;
            var e = this.total;
            var i = this.getPagesTpl();
            var n = this.ele.empty();
            this.isRender = !0,
            this.homePage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="1">‘ + t.homePageText + ‘</a>‘,
            this.prevPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + (a - 1) + ‘">‘ + t.prevPageText + ‘</a>‘,
            this.nextPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + (a + 1) + ‘">‘ + t.nextPageText + ‘</a>‘,
            this.endPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + e + ‘">‘ + t.endPageText + ‘</a>‘,
            this.checkPage(),
            this.isRender && n.html("<div class=‘ui-pagination-container‘>" + this.homePage + this.prevPage + i + this.nextPage + this.endPage + ‘</div>‘);
        },
        checkPage: function() {
            var t = this.opts;
            var a = this.total;
            var e = this.current;
            t.isShow || (this.homePage = this.endPage = ‘‘),
            e === 1 && (this.homePage = this.prevPage = ‘‘),
            e === a && (this.endPage = this.nextPage = ‘‘),
            a === 1 && (this.homePage = this.prevPage = this.endPage = this.nextPage = ‘‘),
            a <= 1 && (this.isRender = !1);
        },
        getPagesTpl: function() {
            var t = this.opts;
            var a = this.total;
            var e = this.current;
            var i = ‘‘;
            var n = t.count;
            if (a <= n) {
                for (g = 1; g <= a; g++) {
                    i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘;
                }
            } else {
                var s = n / 2;
                if (e <= s) {
                    for (g = 1; g <= n; g++) {
                        i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘;
                    }
                } else {
                    var r = Math.floor(s);
                    var h = e + r;
                    var o = e - r;
                    var c = n % 2 == 0;
                    h > a && (c ? (o -= h - a - 1,
                    h = a + 1) : (o -= h - a,
                    h = a)),
                    c || h++;
                    for (var g = o; g < h; g++) {
                        i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘;
                    }
                }
            }
            return i;
        },
        setPage: function(t, a) {
            return t === this.current && a === this.total ? this.ele : (this.current = t,
            this.total = a,
            this.render(),
            this.ele);
        },
        getPage: function() {
            return {
                current: this.current,
                total: this.total
            };
        },
        eventBind: function() {
            var a = this;
            var e = this.opts.callback;
            this.ele.off(‘click‘).on(‘click‘, ‘.ui-pagination-page-item‘, function() {
                var i = t(this).data(‘current‘);
                a.current != i && (a.current = i,
                a.render(),
                e && typeof e === ‘function‘ && e(i));
            });
        }
    },
    t.fn.pagination = function(t, a, e) {
        if (typeof t === ‘object‘) {
            var i = new n(this,t);
            this.data(‘pagination‘, i);
        }
        return typeof t === ‘string‘ ? this.data(‘pagination‘)[t](a, e) : this;
    }
    ;
}(jQuery, window, document));

js：

$(function () {
            var dt;
            var agg = {};
            var ihtml = [];
            $.ajax({
                url: ‘website/news/list‘,
                type: ‘POST‘,
                dataType: "json",
                data: {
                    ‘type‘: ‘1‘
                },
                success: function (datas) { //请求成功后处理函数。
                    dt = datas.result
                    data = datas.result
                    console.log(datas)
                    for (var i in data) {
                        ihtml.push(‘<div class="col-sm-12 col-md-4">‘ +
                            ‘<a href="news-child.html?articleId=‘ + data[i].id + ‘"  target="_blank">‘ +
                            ‘<div class="f1">‘ +
                            ‘<span>‘ +
                            ‘<img src="‘ + data[i].img + ‘"/  width="262">‘ +
                            ‘</span>‘
                            +
                            ‘<h2 class="f-tit">‘ + data[i].title + ‘</h2>‘ +
                            ‘<p class="f-cont">‘ + showHTML(data[i].content, 200, "  ......") + ‘</p>‘ +
                            ‘<p class="f-time">‘ + data[i].updateTime.substring(0, 10) + ‘</p>‘
                            +
                            ‘</div>‘ +
                            ‘</a>‘ +
                            ‘</div>‘)

                    }
                    var cp = 12;
                    var len = ihtml.length / cp;
                    len = parseInt(ihtml.length % cp != 0 ? len + 1 : len);

                    for (var i = 0; i < len; i++) {
                        var start = i * cp;
                        var end = start + cp;
                        end = end > ihtml.length ? ihtml.length : end;
                        ihtml.slice(start, end);
                        console.log(ihtml.slice(start, end));
                        agg[i] = (ihtml.slice(start, end));
                        htmltext = ‘‘ +
                            ‘‘ + (ihtml.slice(start, end)).join("") + ‘‘ +
                            ‘‘
                    }
                    ss(len);
                },
                error: function (d, msg) {
                    console.log("Could not find user " + msg);
                }
            });

            var htmltext = ‘‘;
            function ss(ind) {

                var i = 0;
                i != 0 ? agghtml(agg[i]) : agghtml(agg[0]);
                $("#pagination1").pagination({
                    currentPage: 1,
                    totalPage: ind,
                    callback: function (current) {
                        $("#current1").text(current)
                        console.log(current);
                        i = current - 1;
                        agghtml(agg[i]);
                    }
                });
            }

            function agghtml(arr) {
                htmltext = ‘‘ +
                    ‘‘ + arr.join("") + ‘‘ +
                    ‘‘;

                $(".focus .container").html(htmltext);
            }
        });


        function showHTML(str, length, endstr) {
            if (str != null) {
                var html = str.replace(/<[^>]+>/g, "").replace(/&nbsp;/ig, "").substring(0, length) + endstr;
                return html;
            }
            return null;

        }

 

css

button {
    display: inline-block;
    padding: 6px 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #28a4c9;
    color: #fff;
    background-color: #5bc0de;
    margin: 20px 20px 0 0;
}

.box {
    width: 800px;
    margin: 100px auto 0;
    height: 34px;
}

.pages {
    padding: 50px 0 0;
    text-align: right;
    margin: 0 416px;
}

.info {
    width: 200px;
    height: 34px;
    line-height: 34px;
}


.ui-pagination-container {
    height: 34px;
    line-height: 34px
}

.ui-pagination-container .ui-pagination-page-item {
    font-size: 14px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #c5b7b7;
    color: #888;
    margin: 0 3px;
    text-decoration: none
}

.ui-pagination-container .ui-pagination-page-item:hover {
    border-color: #568dbd;
    color: #568dbd;
    text-decoration: none
}

.ui-pagination-container .ui-pagination-page-item.active {
    background: #568dbd;
    border-color: #568dbd;
    color: #fff;
    cursor: default
}

html：

<div class="content">
    <div class="focus">
        <!-- 渲染内容 -->
        <div class="focus-1 container">
            <!-- <div class="col-sm-12 col-md-4">
                <a href="news-child.html" target="_blank">
                    <div class="f1"><span><img src="images/n01.jpg"  width="262"></span>
                        <h2 class="f-tit">....</h2>
                        <p class="f-cont">
                            ......
                        </p>
                        <p class="f-time">2020-05-25</p>
                    </div>
                </a>
            </div>-->
      
        </div>

    </div>
    <!-- 分页 -->
    <div id="pagination1" class="pages fl"></div>
</div>