August 17th, 2009, 01:40 PM
|
|
Contributing User
|
|
Join Date: Jul 2009
Posts: 83
Time spent in forums: 13 h 53 m 8 sec
Reputation Power: 1
|
|
Waan try Javascript too
Hey,
As I'm working with pagination using php. I just wanted to try Javascript too. So pagination.js script
Code:
//function call for the table name and number of items perpage
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentpage = 1;
this.pages = 0;
this.initied = false;
//calls the function
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
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;
}
//to show the previous page
var oldPageAnchor = document.getElementById('pg'+this.currentpage);
oldPageAnchor.className = 'pg-normal';
//current page
this.currentpage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentpage);
newPageAnchor.className = 'pg-selected';
//definitions for from and to variables used in the above function
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemPerPage - 1;
this.showRecords(from, to);
}
//previous function
this.prev = function(){
if(this.currentpage > 1){
this.showPage(this.currentpage - 1);
}
}
//next function
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"> « Prev</span> |';
for(var page = 1; page <= this.pages; page++)
pagetHtml +=<span id="pg"+ page + '"class="pg-normal" onclick="' + pagerName + '.showPage(' + page +');">' + page + '</span> |';
pagetHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
so I use the below code to be called in my html page
Code:
<html>
<head>
<style type="text/css">
.pg-normal{
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected{
color: black;
font-weight: bold;
text-decoration: underline;
curosr: pointer;
}
</style></head></html>
Code:
<div id="pageNavPosition"></div>
<script type="text/javascript">
var pager = new Pager("csv", 8);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
</script>
The problem is my html page is kinda of complicated, where it has from and to date text box, with calender.
few more text boxes. and finally the submit image.
I tried to run the script but it doesn't seem to work.
|
Codewalkers Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
