Hello guys,
If you want to develop pagination for web pages using javascript, the below code will help you.
So do not worry, just follow bellow mentioned steps todevelop pagination with HTML table.
Step 1:
Write CSS in style tag
<style type="text/css">
.pg-normal {
color: #0000FF;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: #800080;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
</style>
Step 2:
Write javascript code in script tag
<script>
function Pager(tableName, itemsPerPage,showCurrentRecord) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showCurrentRecord=showCurrentRecord;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
var showCount=0;
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to) {
rows[i].style.display = 'none';
}
else {
++showCount;
rows[i].style.display = '';
}
}
this.count(showCount);
}
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"> « </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"> »</span>';
element.innerHTML = pagerHtml;
}
this.count=function(count){
var rowCount = document.getElementById(tableName).rows.length-1;
document.getElementById(showCurrentRecord).innerHTML = 'Showing '+count+' of '+rowCount;
}
}
</script>
Step 3:
Create HTML page with table
<table id="tableID"width="100%">
<thead>
<tr>
<th>User name</th>
<th>Case number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bhagwan</td>
<td>56456</td>
</tr>
<tr>
<td>Chandan</td>
<td>56546</td>
</tr>
</tbody>
</table>
<div id="showRecordCount" class="col-md-3"></div> // showing rows count
<div id="pageNavPosition" > </div>// showing pagination
<script type="text/javascript">
var pager = new Pager('tableID', 13,'showRecordCount');
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
</script>
Note: Put all code in single HTML page.
Now look, your pagination is ready for use.
That's all
2 Comment(s)