Ajax Pagination with Anchor Navigation

In the previous tutorial there is a drawback, we can not go to a specific page directly, we can not give a link to a user to view a particular page. I have faced this problem in many places while play with ajax, and frame content loading.

But now we can solve this by this tutorial: http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Using this i have developed the ajax pagination further, and now we can go directly to a particular page.

Jquery Script (paging.js – inside index.php used to send, receive ajax comm and display results):
No need to change anything here

$().ready(function(){
	setInterval("checkAnchor()", 300);
});

//References
var loading = $("#loading");
var content = $("#content");
var pageNum;
var currentAnchor = null;

//show loading bar
function showLoading(){
	loading.slideDown("slow");
}
//hide loading bar
function hideLoading(){
	loading.slideUp("slow");
};

function checkAnchor(){
	//Check if it has changes
	if(currentAnchor != document.location.hash){
		currentAnchor = document.location.hash;
		//if there is not anchor, the loads the default section
		if(!currentAnchor)
		{
			//default - page = 1
			pageNum = 1;
		}
		else
		{
			//get the page number after #
			pageNum = currentAnchor.substring(1);
		}
		//Send the petition and display the result
		showLoading();
		var targetUrl = "content.php?page=" + pageNum + "&" + $("#myForm").serialize() + " #content";
		content.load(targetUrl, hideLoading);

		//reset all link and highlight the current page link
		$("#pages a").css({'background-color':''})
		$("#pages a[href='#"+ pageNum +"']").css({'background-color':'yellow'});
	}
}

PHP file (content.php – receives request and gives response to index.php):
No need to change anything here

<title>Result</title>


<div align="center" id="content">
	<table border="0" cellpadding="2" cellspacing="2" width="100%" id="table1">
		<tr>
		<td>Sl. No</td>
		
			<td></td>
		
		</tr>
		
		<tr>
			<td>&nbsp;</td>
			&lt;?php
			for($j=0; $j
			<td></td>
			
		</tr>
		
	</table>
</div>

index.php (file we run):
Set 7 variables

	<title>Ajax Load Table - Pagination -  yensdesign.com</title>

body { margin: 0; padding: 0; font-family:Verdana; font-size:10px }
#loading { position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
a {	float: left; margin-right: 16px; text-transform: uppercase;	color: #c2c2c2; }
a:hover { color: #6fa5fd; cursor: pointer; }



	<div align="center">
		<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
			<tr>
				<td>
				<div id="pages">
				&lt;?php
				//Show page links
				for($i=1; $i&lt;=$pages; $i++)
				{
					echo &#039;<a href="#'.$i.'">'.$i.'</a>';
				}
				?&gt;
				</div>
				</td>
			</tr>
			<tr>
				<td>
				<div id="loading" style="position:absolute;">
					LOADING...
				</div>
				</td>
			</tr>
			<tr>
				<td>
				<div id="content" style="height:200px;"></div>
				<form>
					&lt;input type=&quot;hidden&quot; name=&quot;per_page&quot; id=&quot;per_page&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;db_name&quot; id=&quot;db_name&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;table_name&quot; id=&quot;table_name&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;order_by&quot; id=&quot;order_by&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;hostname&quot; id=&quot;hostname&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;username&quot; id=&quot;username&quot; value=&quot;" /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;passwd&quot; id=&quot;passwd&quot; value=&quot;" /&gt;
				</form>
				</td>
			</tr>
		</table>
	</div>
	
	

Full Source

The DEMO

About these ads