pagination code

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shanmugamit
    New Member
    • Feb 2008
    • 45
    #1

    pagination code

    hi,
    i want pagination using java script actually i get data from db that all row will hidden when i click next it will show next two row and hide the present row.but i have problem to go next and prevoius
    Code:
    var count=0;
	var rowcount=1;
	function fnnext(totval)
	{	
		if(rowcount<=totval)
		{
				if(count < totval)
				{		
				document.getElementById(count).style.display="none";
				count=count+1;
				document.getElementById(count).style.display="none";
				
					for(loop=count+1;loop<count+3;loop++)
					{
						document.getElementById(loop).style.display="block";
					}
				count++;
				}
		}
		else
		{
			alert("End of the page")					
		}
			rowcount=loop;
	}
	
	function fnprevious(totval)
	{	alert(count)
		if(rowcount > 2)
		{
				if(count > 2)
				{				
				document.getElementById(count).style.display="none";
				count=count+1;
				document.getElementById(count).style.display="none";
				
					for(loop=count-2;loop>0;loop--)
					{
						document.getElementById(loop).style.display="block";
					}
				count--;	
				}
		}
		else
		{
			alert("First page")			
		}	
			rowcount=loop;
		alert(loop)
	}
    Tags: None
    • iam_clint
      Recognized Expert Top Contributor
      • Jul 2006
      • 1207
      #2
      This is how I would do it.. example.
      Code:
      <html>
<head>
<script>
var current_disp=0;
function fnNext() {
	var SR=document.getElementsByName("SearchResults"); /*Get all the search results into an object array*/
	if (SR.length==0) { SR=getAnyElementByName("DIV", "SearchResults"); }
	if (current_disp==SR.length-1) { alert("End of the page"); return false; } /*Check if you are at the end of the file*/
	if (SR[current_disp]) { /*if its an object*/
		SR[current_disp].style.display="none"; /*hide current results*/
		current_disp++; /*add 1 to current display*/
		SR[current_disp].style.display="block"; /*show next results*/
	}
}

function fnPrev() {
	var SR=document.getElementsByName("SearchResults"); /*Get all the search results into an object array*/
	if (SR.length==0) { SR=getAnyElementByName("DIV", "SearchResults"); }
	if (current_disp==0) { alert("Beginning of the page"); return false; } /*Check if you are at the end of the file*/
	if (SR[current_disp]) { /*if its an object*/
		SR[current_disp].style.display="none"; /*hide current results*/
		current_disp--; /*add 1 to current display*/
		SR[current_disp].style.display="block"; /*show next results*/
	}
}

function getAnyElementByName(eleTag, eleName) { //*my IE Work Around
	var Element_Tag=document.getElementsByTagName(eleTag);
	var Return_Array=Array();
	var c=0;
	for (var i=0; i<Element_Tag.length; i++) {
		if (Element_Tag[i].getAttribute("name")==eleName) {
			Return_Array[c]=Element_Tag[i];
			c++;
		}
	}
	return Return_Array;
}
</script>
</head>
<body>
<div name="SearchResults" id="res0">Results 1<br>Results 2</div>
<div name="SearchResults" id="res1" style="display: none;">Results 3<br>Results 4</div>
<div name="SearchResults" id="res2" style="display: none;">Results 5<br>Results 6</div>
<div name="SearchResults" id="res3" style="display: none;">Results 7<br>Results 8</div>
<div name="SearchResults" id="res4" style="display: none;">Results 9<br>Results 10</div>
<div name="SearchResults" id="res5" style="display: none;">Results 11<br>Results 12</div>
<input type="button" onclick="fnPrev()" value="Prev"><input type="button" onclick="fnNext()" value="Next">
</body>
</html>

        Comment

        Previous template Next
        Working...