AJAX Pagination

Question

julianmoors 0 Newbie Poster

14 Years Ago

Hi Guys,

I'm in need of a paginator at the bottom of a table which is being returned by Ajax's responseText. I'm having trouble as I can't seem to hook up the JavaScript with the one being produced by Ajax. I know some of you will say I need to use jQuery UI, but it's a little late for that as this is the last thing I need to implement.

Also the data is being driven using PHP and MagicParser which works fine. I would prefer not to use a server-side paginator as I'll have to deal with the form's control values which would require more work. I figured I could manipulate the HTML coming back from the server. The name of the <div> that will contain the returned Ajax HTML is called "dynamic_display". Here's the index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="zh-HK" />
	<title>Cantab Education: Timetable</title>
	<script type="text/javascript">
		function showCourse(search, key)
		{
			if (search == "") {
				document.getElementById("dynamic_display").innerHTML = "";
				return;
			}
									
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
						
			xmlhttp.onreadystatechange = function()
			{
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
				}
			}
			
			xmlhttp.open("GET", "search.php?key="+ key +"&search=" + search, true);
			xmlhttp.send();
		}
	</script>
</head>
<body>
	<form>
		<table id="search">
            <tr>
                <th>
                	<label>Subject:&nbsp;</label>
                	<select name="subject" onchange="showCourse(this.value, 'Subject');">
                    	<option selected="selected" value=""></option>
                        <option value="A%20Math">A Math</option>
                        <option value="BAFS(A)">BAFS(A)</option>
                        <option value="BAFS(Acc)">BAFS(Acc)</option>
                        <option value="English">English</option>                       
                    </select>
                </th>
                <th>
                	<label>Tutor:&nbsp;</label>
                	<select name="tutor" onchange="showCourse(this.value, 'Tutor');">
                		<option selected="selected" value=""></option>
                		<option value="A.Yiu">A. Yiu</option>
                		<option value="Alan%20x%20Cars">Alan x Cars</option>
                		<option value="Ally">Ally</option>
                		<option value="Peter%20Chow">Peter Chow</option>
                		<option value="Super%20English%20Force">Super English Force</option>                		
                	</select>
                </th>
                <th>
                	<label>Level:&nbsp;</label>
                	<select name="level" onchange="showCourse(this.value, 'Level');">
                		<option selected="selected" value=""></option>
                		<option value="Form%201">Form 1</option>
                		<option value="Form%202">Form 2</option>
                		<option value="Form%203">Form 3</option>                   		
                	</select>
                </th>
                <th>
                	<label>Type:&nbsp;</label>
                	<select name="type" onchange="showCourse(this.value, 'Course Type');">
                		<option selected="selected" value=""></option>
                		<option value="Summer">Summer</option>
                		<option value="Regular">Regular</option>
                	</select>
                </th>
                <th>
                	<label>Center:&nbsp;</label>
                	<select name="center" onchange="showCourse(this.value, 'Primary Center');">
                		<option selected="selected" value=""></option>
                		<option value="CB%20-%20Cantab%20Education%20Centr%20(Causeway%20Bay)">Causeway Bay</option>
                		<option value="FT%20-%20Cantab%20Education%20Centr%20(Fo%20Tan)">Fo Tan</option>
                		<option value="HH%20-%20Cantab%20Education%20Center%20(Hung%20Hom)">Hung Hom</option>                		
                	</select>
                </th>
            </tr>
    	</table>
    </form>
    <div id="dynamic_display"></div>
</body>
</html>

Can anyone point me in the right direction, perhaps with some sample code?

Thanks,
Julian

javascript php

3 Contributors
9 Replies
442 Views
17 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Protuberance 67 Junior Poster in Training

14 Years Ago

If you want to paginate at the client side, you need to load all pages of search content.
After that, you need a script, which paginate your content
Here is example http://www.geekinterview.com/question_details/34889

Protuberance 67 Junior Poster in Training

14 Years Ago

Sorry, this is parsing problems.
Here is working example

<html>
	<head>
		<title>11111</title>
		<script type='text/javascript'>
		var pager;
		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(this.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(this.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++) 
					pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
				pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; 

				element.innerHTML =pagerHtml;
			}
		}
		window.onload = function()
		{
			pager = new Pager('results', 3); //here you need to add your arguments
			pager.init(); 
			pager.showPageNav('pager', 'pageNavPosition'); 
			pager.showPage(1);
		}
		</script>
		<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;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form action="" method="get" enctype="application/x-www-form-urlencoded">
			<table id="results">
				<tr>
					<th>#</th>
					<th>field</th>
				</tr>
				<tr>
					<td>1</td>
					<td>rajeev</td>
				</tr>
				<tr>
					<td>2</td>
					<td>ramesh</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Rahul</td>
				</tr>
				<tr>
					<td>4</td>
					<td>Bala</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Teamjhon</td>
				</tr>
				<tr>
					<td>6</td>
					<td>Robin</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Sambha</td>
				</tr>
				<tr>
					<td>8</td>
					<td>Arjun</td>
				</tr>
				<tr>
					<td>9</td>
					<td>Satyan</td>
				</tr>
				<tr>
					<td>10</td>
					<td>Singapore</td>
				</tr>
			</table>
			<div id="pageNavPosition"></div>
			<div><input type="submit" onclick="alert('Hey this is just a sample!'); return false;" /> <input type="reset" /></div>
		</form>
</body>
</html>

You create a Pager object, which takes 2 argumens - id of table element to paginate, and number of rows per page.
In this example I using id='results' and 3 rows per page.

Edited 14 Years Ago by Protuberance because: n/a

Protuberance 67 Junior Poster in Training

14 Years Ago

Ajax onSuccess event - create Pager for newly created table.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

julianmoors 0 Newbie Poster · Answer 1 · 2010-09-30T17:00:21+00:00

If you want to paginate at the client side, you need to load all pages of search content.
After that, you need a script, which paginate your content
Here is example http://www.geekinterview.com/question_details/34889

Sorry Protuberance, but I couldn't get the example to work.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-09-30T18:06:46+00:00

Julian,

Without sight of your php, we have to make some assumptions here. Let's assume:

search.php accepts its pagination instruction of the form search.php?key=kkkk&search=sssss&page=N , where N is the page number, starting at 1.
The php generates page links of the form <a href="">N</a> , where N is the page number, starting at 1.
The link for the current page is of the form <a href="" class="current">N</a>
The php delivers the pagination links within <div id="pageLinks"></div> .
There are no pagination links for "previous" or "next".

Now, your javascript would need to be as follows:

function showCourse(search, key, page) {//modified
	page = (!page) ? '0' : page;//added
	showCourse_closure = function(p){
		return function(){ showCourse(search, key, p); }
	};
	if (search == '') {
		document.getElementById("dynamic_display").innerHTML = '';
		return;
	}
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
			var pageLinks = document.getElementById("pageLinks").getElementsById('a');//added
			for(var i=1; i<=pageLinks.length; i++) {//added
				if(pageLinks[i].className === 'current') {//added
					pageLinks[i].onclick = function(){ return false; };//added
				}//added
				else {//added
					pageLinks[i].onclick = showCourse_closure(pageLinks[i].innerHTML);//added
				}//added
			}//added
		}
	}
	xmlhttp.open('GET', 'search.php?key='+ key +'&search=' + search +'&page=' + page, true);//modified
	xmlhttp.send();
	return false;//added
}

I've not been able to test this, so it may need debugging. I'm sure you will get the general idea and be able to make modifications if the assumtions are wrong.

You may well need to do some work on search.php in addition to the javascript, but that's a php question.

Airshow

julianmoors 0 Newbie Poster · Answer 3 · 2010-09-30T18:17:00+00:00

Julian,
Without sight of your php, we have to make some assumptions here. Let's assume:
search.php accepts its pagination instruction of the form search.php?key=kkkk&search=sssss&page=N , where N is the page number, starting at 1.

The php generates page links of the form <a href="">N</a> , where N is the page number, starting at 1.

The link for the current page is of the form <a href="" class="current">N</a>

The php delivers the pagination links within <div id="pageLinks"></div> .

There are no pagination links for "previous" or "next".

Now, your javascript would need to be as follows:
function showCourse(search, key, page) {//modified
	page = (!page) ? '0' : page;//added
	showCourse_closure = function(p){
		return function(){ showCourse(search, key, p); }
	};
	if (search == '') {
		document.getElementById("dynamic_display").innerHTML = '';
		return;
	}
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
			var pageLinks = document.getElementById("pageLinks").getElementsById('a');//added
			for(var i=1; i<=pageLinks.length; i++) {//added
				if(pageLinks[i].className === 'current') {//added
					pageLinks[i].onclick = function(){ return false; };//added
				}//added
				else {//added
					pageLinks[i].onclick = showCourse_closure(pageLinks[i].innerHTML);//added
				}//added
			}//added
		}
	}
	xmlhttp.open('GET', 'search.php?key='+ key +'&search=' + search +'&page=' + page, true);//modified
	xmlhttp.send();
	return false;//added
}
I've not been able to test this, so it may need debugging. I'm sure you will get the general idea and be able to make modifications if the assumtions are wrong.
You may well need to do some work on search.php in addition to the javascript, but that's a php question.
Airshow

Thank you for the reply Airshow, however what I wanted was a way to manipulate the HTML on the client side only as I didn't want to handle form control values.

Regards,
Julian

julianmoors 0 Newbie Poster · Answer 4 · 2010-09-30T18:26:48+00:00

Sorry, this is parsing problems.
Here is working example

<html>
	<head>
		<title>11111</title>
		<script type='text/javascript'>
		var pager;
		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(this.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(this.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++) 
					pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
				pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; 

				element.innerHTML =pagerHtml;
			}
		}
		window.onload = function()
		{
			pager = new Pager('results', 3); //here you need to add your arguments
			pager.init(); 
			pager.showPageNav('pager', 'pageNavPosition'); 
			pager.showPage(1);
		}
		</script>
		<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;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form action="" method="get" enctype="application/x-www-form-urlencoded">
			<table id="results">
				<tr>
					<th>#</th>
					<th>field</th>
				</tr>
				<tr>
					<td>1</td>
					<td>rajeev</td>
				</tr>
				<tr>
					<td>2</td>
					<td>ramesh</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Rahul</td>
				</tr>
				<tr>
					<td>4</td>
					<td>Bala</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Teamjhon</td>
				</tr>
				<tr>
					<td>6</td>
					<td>Robin</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Sambha</td>
				</tr>
				<tr>
					<td>8</td>
					<td>Arjun</td>
				</tr>
				<tr>
					<td>9</td>
					<td>Satyan</td>
				</tr>
				<tr>
					<td>10</td>
					<td>Singapore</td>
				</tr>
			</table>
			<div id="pageNavPosition"></div>
			<div><input type="submit" onclick="alert('Hey this is just a sample!'); return false;" /> <input type="reset" /></div>
		</form>
</body>
</html>

You create a Pager object, which takes 2 argumens - id of table element to paginate, and number of rows per page.
In this example I using id='results' and 3 rows per page.

Good stuff Protuberance, however it doesn't hook up to the Ajax created table, but it does hook up to the HTML static version. Any ideas?

Thanks,
Julian

julianmoors 0 Newbie Poster · Answer 5 · 2010-09-30T20:37:29+00:00

Ajax onSuccess event - create Pager for newly created table.

I got it working Protuberance, so I will mark this thread solved. The only thing I will say is I think the script should print the first page even if it has less than the said number of itemsPerPage. Also the script will carry on going passed the last page number, but other than that great work!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2010-10-01T03:49:35+00:00

Julain,

Thank you for the reply Airshow, however what I wanted was a way to manipulate the HTML on the client side only as I didn't want to handle form control values.

Aha, I think I understand now.

Serving all search results then handling pagination client-side, is an approach that is generally avoided as it is potentially very costly in terms of download time and client ram. Consider 10,000 results!

However if it works for you, then great. Protuberance seems to have written you some good code.

Airshow