Pagination does not work:

Question

I am showing the pagination in my application using the following javascript, its work great for me, but I need to break the pagination after 5 pages

This is my existing pagination.

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

but I need to display the pagination following

1 2 3 4 5 ...... 15 16 17 18 19 20

if I click on page number 5, then it should add another 5 pages to the current page

My javscript is like this

 <script type="text/javascript"> function Pager(tableName, itemsPerPage) { this.tableName = tableName; this.itemsPerPage = itemsPerPage; this.currentPage = 1; this.pages = 0; this.inited = false; this.showRecords = function(from, to) { var rows = document.getElementById(tableName).rows; // i starts from 1 to skip table header row for (var i = 1; i < rows.length; i++) { if (i < from || i > to) rows[i].style.display = 'none'; else rows[i].style.display = ''; } } this.showPage = function(pageNumber) { if (! this.inited) { alert("not inited"); return; } var oldPageAnchor = document.getElementById('pg'+this.currentPage); oldPageAnchor.className = 'pg-normal'; this.currentPage = pageNumber; var newPageAnchor = document.getElementById('pg'+this.currentPage); newPageAnchor.className = 'pg-selected'; var from = (pageNumber - 1) * itemsPerPage + 1; var to = from + itemsPerPage - 1; this.showRecords(from, to); } this.prev = function() { if (this.currentPage > 1) this.showPage(this.currentPage - 1); } this.next = function() { if (this.currentPage < this.pages) { this.showPage(this.currentPage + 1); } } this.init = function() { var rows = document.getElementById(tableName).rows; var records = (rows.length - 1); this.pages = Math.ceil(records / itemsPerPage); this.inited = true; } this.showPageNav = function(pagerName, positionId) { if (! this.inited) { alert("not inited"); return; } var element = document.getElementById(positionId); var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> <img src="${ctx}/images/prev.PNG" alt=" « Prev" height="17px" width="26px" style="vertical-align: middle;"/>&nbsp; </span> '; for (var page = 1; page <= this.pages; page++) pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal">&nbsp;<img src="${ctx}/images/nexts.png" alt="Next »" height="17px" width="26px" style="vertical-align: middle;"/></span>'; element.innerHTML = pagerHtml; } } </script> 

if any suggestion is noticeable

here is jsfiddle

Answer 1

Here is the new jsfiddle that does what you want to do:

http://jsfiddle.net/nye7a/2/

The showPageNav function has been changed as follows:

 this.showPageNav = function(pagerName, positionId) { var pageIndex = this.currentPage, pageCount = this.pages, start = Math.max(1, pageIndex - 4), end = Math.min(pageCount, pageIndex + 4), start2 = pageCount-4, end2 = pageCount; if (start2 <= end) end = pageCount; if (! this.inited) { alert("not inited"); return; } var element = document.getElementById(positionId); var pagerHtml = ''; // adds the Prev button only if needed if (pageIndex > 1) pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> '; // paging from 1 to 5 for (var page = start; page <= end; page++) { pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; } // paging from pageCount-5 to pageCount if (end != pageCount) { pagerHtml += '<span>...</span>'; for (var page = start2; page <= end2; page++) { pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; } } // adds the Next button only if needed if (pageIndex < pageCount && pageCount > 1) pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; element.innerHTML = pagerHtml; }