如何自定义分页 jQuery

您可以像这样访问插件属性：

($('.pagination').jqPagination('option', 'max_page'))

检查小提琴以查看其工作情况：https://jsfiddle.net/ivan0013/hqz90Lwj/5/

根据 jqPagination 插件文档的自定义部分，您可以将page_string传递给选项。默认值为 'Page {current_page} of {max_page}' 。

您可以将选项中的page_string更改为 'Page {current_page}' ，然后将最大页码放在分页元素之外的单独 HTML 元素中。

在此处查看更新的小提琴。

您可以在 jqPagination 对象外部计算 maxPageNumber，并将此值设置为 next 按钮之后的 span 元素。

要更改页面格式字符串，您可以使用：

page_string:  'Page {current_page}',

不要复制或包含插件的 src 代码，您可以将其包含在：

<script src="https://rawgit.com/beneverard/jqPagination/master/js/jquery.jqpagination.min.js"></script>

代码段：

$(document).ready(function () {
  // hide all but the first of our paragraphs
  $('.some-container div.loaded-page:not(:first)').hide();
  
  // compute the maxPageNumber
  var maxPageNumber = $('.some-container div.loaded-page').length;
  
  // set this value as you wish: 
  $('#maxPageNumber').text(maxPageNumber);
  
  
  // initialize the jqPagination
  $('.pagination').jqPagination({
    max_page: maxPageNumber,
    page_string:  'Page {current_page}',  // change the string format
    paged: function (page) {
      // a new 'page' has been requested
      // hide all paragraphs
      $('.some-container div.loaded-page').hide();
      // but show the one we want
      $($('.some-container div.loaded-page')[page - 1]).show();
    }
  });
});

.pagenumber::-ms-clear {
  width: 0;
  height: 0;
}
.pagination {
  display: inline-block;
  border-radius: 3px;
}
.pagination a {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  outline: none;
  border-right: 1px solid #CDCDCD;
  border-left: 1px solid #CDCDCD;
  color: #555555;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  /* ATTN: need a better font stack */
  background-color: #f3f3f3;
}
.pagination a:hover, .pagination a:focus, .pagination a:active {
  background-color: #006699;
  color: white;
  border: 1px solid #cdcdcd;
}
.pagination a.previous:hover, .pagination a.previous:focus, .pagination a.previous:active, .pagination a.next:hover,
.pagination a.next:focus, .pagination a.next:active, .pagination a.disabled, .pagination a.disabled:hover,
.pagination a.disabled:focus, .pagination a.disabled:active {
  background-color: #006699;
  color: #A8A8A8;
  cursor: default;
  color: white;
}
.pagination a:first-child {
  border: none;
  border-radius: 2px 0 0 2px;
}
.pagination a:last-child {
  border: none;
  border-radius: 0 2px 2px 0;
}
.pagination input {
  float: left;
  margin: 0;
  padding: 0;
  width: 115px;
  height: 20px;
  outline: none;
  border: none;
  vertical-align: middle;
  text-align: center;
}
/* gigantic class for demo purposes */
.gigantic.pagination {
  margin: 0;
}
.gigantic.pagination a {
  font-size: 30px;
  background-color: #eee;
  border-radius: 0;
  color: #006699;
  float: left;
  height: 35px;
  width: 35px;
  line-height: 30px;
  border: solid 1px #ccc;
}
.gigantic.pagination input {
  width: 120px;
  font-size: 15px;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 7px 0;
}
/* log element for demo purposes */
.log {
  display: none;
  background-color: #EDEDED;
  height: 300px;
  width: 524px;
  overflow: auto;
  margin-left: 0;
  list-style: none;
  padding: 10px;
}
.log li {
  margin-top: 0;
  margin-bottom: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://rawgit.com/beneverard/jqPagination/master/js/jquery.jqpagination.min.js"></script>
<div class="some-container">
    <div class="loaded-page">First page </div>
    <div class="loaded-page">Second page</div>
    <div class="loaded-page">Third page</div>
</div>
<div class="gigantic pagination">
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input class="pagenumber" type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <span id="maxPageNumber" style='margin-top: 1.00em;margin-left:1.25em; display:inline-block;'/>
</div>

HTML：

<div class="some-container">
  <div class="loaded-page">First page </div>
  <div class="loaded-page">Second page</div>
  <div class="loaded-page">Third page</div>
</div>
<div class="gigantic pagination">
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input class="pagenumber" type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <input class="maxPageNumber" type="text" readonly="readonly" id="maxPag" />
</div>

.JS：

(function(e) {
 "use strict";
 e.jqPagination = function(t, n) {
    var r = this;
    r.$el = e(t);
    r.el = t;
    r.$input = r.$el.find(".pagenumber");
    r.$el.data("jqPagination", r);
    r.init = function() {
        r.options = e.extend({}, e.jqPagination.defaultOptions, n);
        r.options.max_page === null && (r.$input.data("max-page") !== undefined ? r.options.max_page = r.$input.data("max-page") : r.options.max_page = 1);
        r.$input.data("current-page") !== undefined && r.isNumber(r.$input.data("current-page")) && (r.options.current_page = r.$input.data("current-page"));
        r.$input.removeAttr("readonly");
        r.updateInput(!0);
        r.$input.on("focus.jqPagination mouseup.jqPagination", function(t) {
            if (t.type === "focus") {
                var n = parseInt(r.options.current_page, 10);
                e(this).val(n).select()
            }
            if (t.type === "mouseup") return !1
        });
        r.$input.on("blur.jqPagination keydown.jqPagination", function(t) {
            var n = e(this),
                i = parseInt(r.options.current_page, 10);
            if (t.keyCode === 27) {
                n.val(i);
                n.blur()
            }
            t.keyCode === 13 && n.blur();
            t.type === "blur" && r.setPage(n.val())
        });
        r.$el.on("click.jqPagination", "a", function(t) {
            var n = e(this);
            if (n.hasClass("disabled")) return !1;
            if (!t.metaKey && !t.ctrlKey) {
                t.preventDefault();
                r.setPage(n.data("action"))
            }
        })
    };
    r.setPage = function(e, t) {
        if (e === undefined) return r.options.current_page;
        var n = parseInt(r.options.current_page, 10),
            i = parseInt(r.options.max_page, 10);
        if (isNaN(parseInt(e, 10))) switch (e) {
            case "first":
                e = 1;
                break;
            case "prev":
            case "previous":
                e = n - 1;
                break;
            case "next":
                e = n + 1;
                break;
            case "last":
                e = i
        }
        e = parseInt(e, 10);
        if (isNaN(e) || e < 1 || e > i) {
            r.setInputValue(n);
            return !1
        }
        r.options.current_page = e;
        r.$input.data("current-page", e);
        r.updateInput(t)
    };
    r.setMaxPage = function(e, t) {
        if (e === undefined) return r.options.max_page;
        if (!r.isNumber(e)) {
            console.error("jqPagination: max_page is not a number");
            return !1
        }
        if (e < r.options.current_page) {
            console.error("jqPagination: max_page lower than current_page");
            return !1
        }
        r.options.max_page = e;
        r.$input.data("max-page", e);
        r.updateInput(t)
    };
    r.updateInput = function(e) {
        var t = parseInt(r.options.current_page, 10);
        r.setInputValue(t);
        r.setLinks(t);
        e !== !0 && r.options.paged(t)
    };
    r.setInputValue = function(e) {
        var t = r.options.page_string,
            n = r.options.max_page;
        t = t.replace("{current_page}", e).replace("{max_page}", n);
        r.$input.val(t);
        $("#maxPag").val("of " + n);
    };
    r.isNumber = function(e) {
        return !isNaN(parseFloat(e)) && isFinite(e)
    };
    r.setLinks = function(e) {
        var t = r.options.link_string,
            n = parseInt(r.options.current_page, 10),
            i = parseInt(r.options.max_page, 10);
        if (t !== "") {
            var s = n - 1;
            s < 1 && (s = 1);
            var o = n + 1;
            o > i && (o = i);
            r.$el.find("a.first").attr("href", t.replace("{page_number}", "1"));
            r.$el.find("a.prev, a.previous").attr("href", t.replace("{page_number}", s));
            r.$el.find("a.next").attr("href", t.replace("{page_number}", o));
            r.$el.find("a.last").attr("href", t.replace("{page_number}", i))
        }
        r.$el.find("a").removeClass("disabled");
        n === i && r.$el.find(".next, .last").addClass("disabled");
        n === 1 && r.$el.find(".previous, .first").addClass("disabled")
    };
    r.callMethod = function(t, n, i) {
        switch (t.toLowerCase()) {
            case "option":
                if (i === undefined && typeof n != "object") return r.options[n];
                var s = {
                        trigger: !0
                    },
                    o = !1;
                e.isPlainObject(n) && !i ? e.extend(s, n) : s[n] = i;
                var u = s.trigger === !1;
                s.current_page !== undefined && (o = r.setPage(s.current_page, u));
                s.max_page !== undefined && (o = r.setMaxPage(s.max_page, u));
                o === !1 && console.error("jqPagination: cannot get / set option " + n);
                return o;
            case "destroy":
                r.$el.off(".jqPagination").find("*").off(".jqPagination");
                break;
            default:
                console.error('jqPagination: method "' + t + '" does not exist');
                return !1
        }
    };
    r.init()
};
e.jqPagination.defaultOptions = {
    current_page: 1,
    link_string: "",
    max_page: null,
    page_string: "Page {current_page}",
    page_string2:  "of {max_page}",
    paged: function() {}
};
e.fn.jqPagination = function() {
    var t = this,
        n = e(t),
        r = Array.prototype.slice.call(arguments),
        i = !1;
    if (typeof r[0] == "string") {
        r[2] === undefined ? i = n.first().data("jqPagination").callMethod(r[0], r[1]) : n.each(function() {
            i = e(this).data("jqPagination").callMethod(r[0], r[1], r[2]);
        });
        return i
    }
    t.each(function() {
        new e.jqPagination(this, r[0])
    })
}
})(jQuery);
if (!console) {
  var console = {},
    func = function() {
        return !1
    };
console.log = func;
console.info = func;
console.warn = func;
console.error = func
};
$(document).ready(function() {
 // hide all but the first of our paragraphs
$('.some-container div.loaded-page:not(:first)').hide();
$('.pagination').jqPagination({
    max_page    : $('.some-container div.loaded-page').length,
    paged        : function(page) {
        // a new 'page' has been requested
        // hide all paragraphs
        $('.some-container div.loaded-page').hide();
        // but show the one we want
        $($('.some-container div.loaded-page')[page - 1]).show();
    }
});
$('.pagination2').jqPagination({
    max_page    : $('.some-container div.loaded-page').length,
    paged        : function(page) {
        // a new 'page' has been requested
        // hide all paragraphs
        $('.some-container div.loaded-page').hide();
        // but show the one we want
        $($('.some-container div.loaded-page')[page - 1]).show();
    }
});
});

.CSS：

.pagenumber::-ms-clear{
   width: 0;
   height: 0;
}
.pagination{
    display: inline-block;
    border-radius: 3px; 
}

我将<input class="maxPageNumber" type="text" readonly="readonly" id="maxPag" />更改page_string: "Page {current_page} of {max_page}"包含在page_string: "Page {current_page}", page_string2: "of {max_page}"并包含$("#maxPag").val("of" + n);