I am displaying pagination in my application using following javascript,its working fine for me, but i need to break the pagination after 5 pages
This is my existing pagination
1
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 by 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 current page
My Javscript 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;"/> </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"> <img src="${ctx}/images/nexts.png" alt="Next »" height="17px" width="26px" style="vertical-align: middle;"/></span>';
element.innerHTML = pagerHtml;
}
}
</script>
if any suggestion it will be appreciable
here is the JSfiddle
Google's preferred method for directly handling pagination in a page series is to create a 'view all' page, separate from the paginated pages, which includes all products in the category. You can then add a rel=”canonical” tag throughout the paginated series that links to the “view all” page.
Pagination is actually baked right into WordPress. To set everything up, you'll need to visit the WordPress admin first. From there, you can visit Settings -> Reading. This is where you can set up the basic formatting of your posts.
Pagination is a process that is used to divide a large data into smaller discrete pages, and this process is also known as paging. Pagination is commonly used by web applications and can be seen on Google.
Here is a new jsfiddle doing what you want to do:
http://jsfiddle.net/nye7a/2/
The showPageNav function has been changed like this :
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With