jQuery Pagination Plugin - Show in groups of 7

Question

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!

Answer 1

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.