jQuery分页插件-以7组显示 [英] jQuery Pagination Plugin - Show in groups of 7

问题描述

这与以下jQuery分页代码有关: https: //github.com/gbirke/jquery_pagination/blob/master/src/jquery.pagination.js

我可以使它按当前代码运行正常，但是想知道是否有人建议将分页显示为7组，因此它们可以从1-7页开始，并且只显示那些导航中的页面.然后，当他们转到第8页时，将显示第8-14页，依此类推.

而不是像本例所示那样向上移动以显示1-7、2-8、3-9等:解决方案

您想要的功能不是该插件中实现的功能.一种或另一种方式，您将需要修改插件代码以满足您的要求.您可以分叉项目并创建自己的修改后的实现，也可以在加载插件后 覆盖页面中的代码.我会给你一个第二种选择的例子.

窥视插件源代码，我们发现此有用的评论:

/**
 * Calculate start and end point of pagination links depending on 
 * current_page and num_display_entries.
 * @returns {Array}
 */

这可能是我们感兴趣的代码的地方，因为注释告诉我们这是开始和结束分页链接的计算位置.此注释应用于名为getInterval的方法，该方法属于名为PaginationCalculator的构造函数的prototype，该函数由插件定义并附加到全局jQuery对象($).

为了修改开始和结束链接，我们将需要覆盖此方法.消息来源向我们展示了此方法接受单个参数current_page并返回具有两个属性start和end的对象(尽管该方法上方的注释表明该方法返回一个Array). /p>

我们知道我们希望start是配置插件实例(例如7)的num_display_entries号的倍数.我们的start可以是0，7，14等，这取决于我们的current_page属于7个块中的哪个.另外，我们知道end必须比start多7，除非产生的end大于我们的总页数，在这种情况下end应等于的总页数.页面.我们可以使用PaginationCalculator构造函数numPages的另一种原型方法来获取总页数.

以下代码将满足我们的要求:

$.PaginationCalculator.prototype.getInterval = function (current_page) {
    var num_display_entries = this.opts.num_display_entries;
    var start = Math.floor(current_page / num_display_entries) * num_display_entries;
    var end = Math.min(start + num_display_entries, this.numPages());

    return { start: start, end: end };
};

我创建了一个 JS Fiddle演示.

This is regarding the following jQuery Pagination code: https://github.com/gbirke/jquery_pagination/blob/master/src/jquery.pagination.js

I can get it to run fine as the current code should, but wondered if anyone has any suggestions to essentially make the pagination show the pages in groups of 7, so they can go from page 1-7 and it only shows those pages in the navigation. Then when they go to page 8, it will show the pages 8-14 and so on.

Rather than just moving up to show 1-7, 2-8, 3-9 etc like shown in this example: https://i.gyazo.com/5afa6e66e7e95f973d83191f45d8296e.mp4

I understand it may be fairly difficult, but I may be wrong!

Bonus would be being able to jump in pages of 7 at a time, but think I can sort that fine once this issue is resolved.

Any suggestions much appreciated.

Thanks a lot!

解决方案

The functionality you want is not what implemented in that plugin. One way or another, you will need to modify the plugin code meet your requirements. You could fork the project and create your own modified implementation, or you could overwrite the code in your page after the plugin has been loaded. I will give you an example of the second alternative.

Taking a peek at the plugin source code, we find this helpful comment:

/**
 * Calculate start and end point of pagination links depending on 
 * current_page and num_display_entries.
 * @returns {Array}
 */

This is likely where the code is that we are interested in because the comment tells us that this is where the start and end pagination links are calculated. This comment is applied to a method called getInterval which belongs to the prototype of a constructor function called PaginationCalculator which the plugin defines and attaches to the global jQuery object ($).

In order for us to modify the start and end links we will need to overwrite this method. The source shows us that this method accepts a single parameter, current_page and returns an object with two properties, start and end (despite the fact that the comment above the method says that this method returns an Array).

We know that we want start to be a multiple of the num_display_entries number with which we configure our plugin instance (ex., 7). Our start can be 0, 7, 14, etc., depending on which chunk of 7 our current_page belongs to. Also, we know that our end must be 7 more than our start, unless this produces an end that is greater than our total number of pages, in which case end should be equal to the total number of pages. We can obtain the total number of pages using another prototype method of the PaginationCalculator constructor, numPages.

The following code will satisfy our requirements:

$.PaginationCalculator.prototype.getInterval = function (current_page) {
    var num_display_entries = this.opts.num_display_entries;
    var start = Math.floor(current_page / num_display_entries) * num_display_entries;
    var end = Math.min(start + num_display_entries, this.numPages());

    return { start: start, end: end };
};

I have created a JS Fiddle demo for reference.

这篇关于jQuery分页插件-以7组显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！