| 1 |
function Pager(tableName, itemsPerPage) { |
| 2 |
this.tableName = tableName; |
| 3 |
this.itemsPerPage = itemsPerPage; |
| 4 |
this.currentPage = 1; |
| 5 |
this.pages = 0; |
| 6 |
this.inited = false; |
| 7 |
|
| 8 |
this.showRecords = function(from, to) { |
| 9 |
var rows = document.getElementById(tableName).rows; |
| 10 |
// i starts from 1 to skip table header row |
| 11 |
for (var i = 1; i < rows.length; i++) { |
| 12 |
if (i < from || i > to) |
| 13 |
rows[i].style.display = 'none'; |
| 14 |
else |
| 15 |
rows[i].style.display = ''; |
| 16 |
} |
| 17 |
} |
| 18 |
|
| 19 |
this.showPage = function(pageNumber) { |
| 20 |
if (! this.inited) { |
| 21 |
alert("not inited"); |
| 22 |
return; |
| 23 |
} |
| 24 |
|
| 25 |
var oldPageAnchor = document.getElementById('pg'+this.currentPage); |
| 26 |
oldPageAnchor.className = 'pg-normal'; |
| 27 |
|
| 28 |
this.currentPage = pageNumber; |
| 29 |
var newPageAnchor = document.getElementById('pg'+this.currentPage); |
| 30 |
newPageAnchor.className = 'pg-selected'; |
| 31 |
|
| 32 |
var from = (pageNumber - 1) * itemsPerPage + 1; |
| 33 |
var to = from + itemsPerPage - 1; |
| 34 |
this.showRecords(from, to); |
| 35 |
} |
| 36 |
|
| 37 |
this.prev = function() { |
| 38 |
if (this.currentPage > 1) |
| 39 |
this.showPage(this.currentPage - 1); |
| 40 |
} |
| 41 |
|
| 42 |
this.next = function() { |
| 43 |
if (this.currentPage < this.pages) { |
| 44 |
this.showPage(this.currentPage + 1); |
| 45 |
} |
| 46 |
} |
| 47 |
|
| 48 |
this.init = function() { |
| 49 |
var rows = document.getElementById(tableName).rows; |
| 50 |
var records = (rows.length - 1); |
| 51 |
this.pages = Math.ceil(records / itemsPerPage); |
| 52 |
this.inited = true; |
| 53 |
} |
| 54 |
|
| 55 |
this.showPageNav = function(pagerName, positionId) { |
| 56 |
if (! this.inited) { |
| 57 |
alert("not inited"); |
| 58 |
return; |
| 59 |
} |
| 60 |
var element = document.getElementById(positionId); |
| 61 |
|
| 62 |
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | '; |
| 63 |
for (var page = 1; page <= this.pages; page++) |
| 64 |
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | '; |
| 65 |
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; |
| 66 |
|
| 67 |
element.innerHTML = pagerHtml; |
| 68 |
} |
| 69 |
} |
| 70 |
|
| 71 |
|
