js分页插件_$('#mainpagination').empty().append(pagestr);-CSDN博客

本文链接：https://blog.csdn.net/qq_34531925/article/details/77053801

<link type="text/css" rel="stylesheet"
        href="${ctxStatic}/css/simplePagination.css" />
    <!--分页插件 js-->
    <script type="text/javascript"
        src="${ctxStatic}/js/jquery.simplePagination.js"></script>
    <script type="text/javascript">
    $(function() {
            $("#paging1").pagination({
                items : '${page.totalCount}', //总数量
                itemsOnPage : '${page.pageSize}', //每页多少条
                currentPage : '${page.currPage}',
                cssStyle : 'compact-theme',
                onPageClick : function(pageNumber, event) {
                    location.href = '${ctx}/user?page=' + pageNumber
                }
            });
        });
<div id="paging1" class="page" style="float: right"></div>

css

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/

ul.simple-pagination {
    list-style: none;
}

.simple-pagination {
    display: block;
    overflow: hidden;
    padding: 0 0 5px 5px;
    margin: 0;
}

.simple-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.simple-pagination li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}

/*------------------------------------*\
    Compact Theme Styles
\*------------------------------------*/

.compact-theme a, .compact-theme span {
    float: left;
    color: #333;
    font-size:14px;
    line-height:30px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #ccc;
    border-right: none;
    min-width: 14px;
    padding: 0 9px;

    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.compact-theme a:hover {
    text-decoration: none;
    background: #f8f8f8; /* Old browsers */
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
    background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
}

.compact-theme .prev {
    border-radius: 3px 0 0 3px;
}

.compact-theme .next {
    border-right: 1px solid #e5e5e5;
    border-radius: 0 3px 3px 0;
}

.compact-theme .current {
    background: #bbbbbb; /* Old browsers */
    background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
    background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
    cursor: default;
}

.compact-theme .ellipse {
    background: #EAEAEA;
    padding: 0 10px;
    cursor: default;
}

/*------------------------------------*\
    Light Theme Styles
\*------------------------------------*/

.light-theme a, .light-theme span {
    float: left;
    color: #666;
    font-size:14px;
    line-height:24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #BBB;
    min-width: 14px;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.light-theme a:hover {
    text-decoration: none;
    background: #FCFCFC;
}

.light-theme .current {
    background: #666;
    color: #FFF;
    border-color: #444;
    box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
    cursor: default;
}

.light-theme .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}

/*------------------------------------*\
    Dark Theme Styles
\*------------------------------------*/

.dark-theme a, .dark-theme span {
    float: left;
    color: #CCC;
    font-size:14px;
    line-height:24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #222;
    min-width: 14px;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    background: #555; /* Old browsers */
    background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
    background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
}

.dark-theme a:hover {
    text-decoration: none;
    background: #444;
}

.dark-theme .current {
    background: #222;
    color: #FFF;
    border-color: #000;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    cursor: default;
}

.dark-theme .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}

js

/**
* simplePagination.js v1.5
* A simple jQuery pagination plugin.
* http://flaviusmatis.github.com/simplePagination.js/
*
* Copyright 2012, Flavius Matis
* Released under the MIT license.
* http://flaviusmatis.github.com/license.html
*/

(function($){

    var methods = {
        init: function(options) {
            var o = $.extend({
                items: 1,
                itemsOnPage: 1,
                pages: 0,
                displayedPages: 5,
                edges: 2,
                currentPage: 1,
                hrefTextPrefix: '#page-',
                hrefTextSuffix: '',
                prevText: '上一页',
                nextText: '下一页',
                ellipseText: '&hellip;',
                cssStyle: 'light-theme',
                selectOnClick: true,
                onPageClick: function(pageNumber, event) {
                    // Callback triggered when a page is clicked
                    // Page number is given as an optional parameter
                },
                onInit: function() {
                    // Callback triggered immediately after initialization
                }
            }, options || {});

            var self = this;

            o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
            o.currentPage = o.currentPage - 1;
            o.halfDisplayed = o.displayedPages / 2;

            this.each(function() {
                self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
                methods._draw.call(self);
            });

            o.onInit();

            return this;
        },

        selectPage: function(page) {
            methods._selectPage.call(this, page - 1);
            return this;
        },

        prevPage: function() {
            var o = this.data('pagination');
            if (o.currentPage > 0) {
                methods._selectPage.call(this, o.currentPage - 1);
            }
            return this;
        },

        nextPage: function() {
            var o = this.data('pagination');
            if (o.currentPage < o.pages - 1) {
                methods._selectPage.call(this, o.currentPage + 1);
            }
            return this;
        },

        getPagesCount: function() {
            return this.data('pagination').pages;
        },

        getCurrentPage: function () {
            return this.data('pagination').currentPage + 1;
        },

        destroy: function(){
            this.empty();
            return this;
        },

        redraw: function(){
            methods._draw.call(this);
            return this;
        },

        disable: function(){
            var o = this.data('pagination');
            o.disabled = true;
            this.data('pagination', o);
            methods._draw.call(this);
            return this;
        },

        enable: function(){
            var o = this.data('pagination');
            o.disabled = false;
            this.data('pagination', o);
            methods._draw.call(this);
            return this;
        },

        _draw: function() {
            var o = this.data('pagination'),
                interval = methods._getInterval(o),
                i;

            methods.destroy.call(this);

            var $panel = this.prop("tagName") === "UL" ? this : $('<ul></ul>').appendTo(this);

            // Generate Prev link
            if (o.prevText) {
                methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});
            }

            // Generate start edges
            if (interval.start > 0 && o.edges > 0) {
                var end = Math.min(o.edges, interval.start);
                for (i = 0; i < end; i++) {
                    methods._appendItem.call(this, i);
                }
                if (o.edges < interval.start && (interval.start - o.edges != 1)) {
                    $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
                } else if (interval.start - o.edges == 1) {
                    methods._appendItem.call(this, o.edges);
                }
            }

            // Generate interval links
            for (i = interval.start; i < interval.end; i++) {
                methods._appendItem.call(this, i);
            }

            // Generate end edges
            if (interval.end < o.pages && o.edges > 0) {
                if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
                    $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
                } else if (o.pages - o.edges - interval.end == 1) {
                    methods._appendItem.call(this, interval.end++);
                }
                var begin = Math.max(o.pages - o.edges, interval.end);
                for (i = begin; i < o.pages; i++) {
                    methods._appendItem.call(this, i);
                }
            }

            // Generate Next link
            if (o.nextText) {
                methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});
            }
        },

        _getInterval: function(o) {
            return {
                start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
                end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
            };
        },

        _appendItem: function(pageIndex, opts) {
            var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');

            pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);

            options = $.extend({
                text: pageIndex + 1,
                classes: ''
            }, opts || {});

            if (pageIndex == o.currentPage || o.disabled) {
                if (o.disabled) {
                    $linkWrapper.addClass('disabled');
                } else {
                    $linkWrapper.addClass('active');
                }
                $link = $('<span class="current">' + (options.text) + '</span>');
            } else {
                $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
                $link.click(function(event){
                    return methods._selectPage.call(self, pageIndex, event);
                });
            }

            if (options.classes) {
                $link.addClass(options.classes);
            }

            $linkWrapper.append($link);

            if ($ul.length) {
                $ul.append($linkWrapper);
            } else {
                self.append($linkWrapper);
            }
        },

        _selectPage: function(pageIndex, event) {
            var o = this.data('pagination');
            o.currentPage = pageIndex;
            if (o.selectOnClick) {
                methods._draw.call(this);
            }
            return o.onPageClick(pageIndex + 1, event);
        }

    };

    $.fn.pagination = function(method) {

        // Method calling logic
        if (methods[method] && method.charAt(0) != '_') {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.pagination');
        }

    };

})(jQuery);