Simple HTML Paging with JavaScript

Hi,

In this post i'll take you step by step with a little upgrade I wrote for this nice plugin:

http://www.jqueryscript.net/table/Client-side-HTML-Table-Pagination-Plugin-with-jQuery-Paging.html

You can checkout the demo over here:

http://www.jqueryscript.net/demo/Client-side-HTML-Table-Pagination-Plugin-with-jQuery-Paging/

Unfortunately, that cool plugin has one thing missing for my use-case. In case of a large table with many rows, you cannot limit the paging number.
You CAN limit the rows per page, but CANNOT limit the number of pagination links.

So I decided to enhance the "paging.js" file.

Let's take a brief look over the changes i've made. 

Changes I made are marked with red.

Added "limitPaging" property

First, I needed to add a property that would hold the maximum number of paging links:

options: {

                limit: 5,

                limitPaging: 5,

                rowDisplayStyle: 'block',

                activePage: 0,

                rows: []

            }

Notice that "limit" is the number of rows per page.

Hiding unnecessary links when initializing the navbar

The blue navigation bar is intialized at "_getNavBar" function.

I needed to  add a code that displays the first numbers until limitPaging value. 

For instance: if limitPaging is 5, then only "1 2 3 4 5" links should be presented.

var rows = this.options.rows;

                var nav = $('<div>', { class: 'paging-nav' });

                var displayVal;

                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {

                    displayVal = 'display:inline-block';

                    if (i > this.options.limitPaging)

                        displayVal = 'display:none';

                    this._on($('<a>', {

                        href: '#',

                        text: (i + 1),

                        "data-page": (i),

                        style: displayVal

                    }).appendTo(nav),

                            { click: "pageClickHandler" });

                }

Basically, the number of the "for" loop runs equals to the number of pages. I did not want to change any of that logic, just to hide some of them (according to limitPaging).

"displayVal" holds the style configuration for showing/not showing the paging link.

In case a page number ("i" var) is bigger then the limitPaging prop - then displayVal gets the hiding config.

In the event handler code ( .on() - http://api.jquery.com/on/ ), each link is created.

I added a style attribute with the display value.

Clicking on a paging link

After a click on a paging link - "pageClickHandler" gets fired.

I wanted that the selected page would always be in the middle.

"itemsOnEachSide" - defines the number of visible paging index on each side

"startPage" - defines the index of the first visible paging index

"endPage" - defines the index of the last visible paging index

"pagingLinks" - holds all the paging links

In the "for" loop, there is an iteration on each paging links and you can see that the display logic is pretty simple.

pageClickHandler: function (event) {

                event.preventDefault();

                $(event.target).siblings().attr('class', "");

                $(event.target).attr('class', "selected-page");

                var pageNum = $(event.target).attr('data-page');

                var itemsOnEachSide = this.options.limitPaging / 2;

                var startPage = Math.floor(parseInt(pageNum) - itemsOnEachSide + 1); // Plus 1 because the array of links starts in "1" index and not "0". "0" index is the next (">>") button 

                var endPage = Math.ceil(parseInt(pageNum) + itemsOnEachSide + 1);

                var pagingLinks = $(event.target).parent().children();

                for (var i = 1; i < pagingLinks.length - 1; i++) {

                    if(i>=startPage && i<=endPage)

                        $(pagingLinks[i]).css('display', 'inline-block');

                        else

                            $(pagingLinks[i]).css('display', 'none');

                }

                this.showPage(pageNum);

            }

Final Look:

Updating widget after loading

JQuery Widget has to be loaded only once. 

If you want to update the paging navigation bar (in case the amount of list rows gets changed), be sure to add an "update" method in this "paging.js" file and use it.

JSFiddle

http://jsfiddle.net/ohadinho/vnv646mp/