Question

在我的项目中，我正在使用jqPagination插件。我非常喜欢这个功能，但我想知道是否可以按照最大页码始终出现在输入框之外的方式进行自定义。这是我对jsfiddle https://jsfiddle.net/webIra7/hqz90Lwj/1/

的链接

<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>
</div>

Answer 1

您可以访问以下插件属性：

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

检查小提琴是否有效：https://jsfiddle.net/ivan0013/hqz90Lwj/5/

Answer 2

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

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

请参阅更新的小提琴here。

Answer 3

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

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

page_string:  'Page {current_page}',

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

中

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

摘录：

＆＃13;

$(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();

    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

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);

如何自定义分页jQuery？

4 个答案: