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
This entry was posted in Ajax, Jquery, PHP, Tutorial and tagged , , . Bookmark the permalink.

13 Responses to Ajax Pagination with Anchor Navigation

  1. beski says:

    # //EDIT these 3 variables for connection
    # $hostname = “localhost”;
    # $username = “root”;
    # $passwd = “”;

    – Its not advisable to use this. Better using a config.php for db connection.
    Because the user can view the connection parameters by viewing thew page source.

  2. Lauri says:

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\Documents and Settings\Administrator\Desktop\www\aurl\paging-anchor\content.php on line 32

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\Documents and Settings\Administrator\Desktop\www\aurl\paging-anchor\content.php on line 43

  3. Margaret says:

    This one doesn’t work at all. Not even page numbers are showing. Just SI.no.

  4. Alvaro says:

    ejem ejem… sure i won’t use these ones… all mysql connection data in clear text ?!?!?!?!

    <input type="hidden" name="db_name" id="db_name" value="” />

    <input type="hidden" name="table_name" id="table_name" value="” />

    <input type="hidden" name="order_by" id="order_by" value="” />

    <input type="hidden" name="hostname" id="hostname" value="” />

    <input type="hidden" name="username" id="username" value="” />

    <input type="hidden" name="passwd" id="passwd" value="” />

  5. Meissam Qanbari says:

    Hi to everyone …
    You Should Use <?php echo instead of value <?=
    enjoy

  6. hey! this website is the perfect example of a fine word press template am I right? seems all so organized that it even makes me think its perfect! keep it going.

  7. jatin says:

    not usefull very bad script

  8. Adam says:

    Hi there beski

    Is there a way to not use DB at all? I have a page with anchors that I want to paginate. Thanks in advance for advices and solutions.

    Cheers

    Adam

  9. Guest User says:

    how do i play the demo? It ask me for username and password, which i don’t have.

  10. Hung Nguyen says:

    So good article, it help me alot. I dont want to use events base jquery pagination plugins, becos its not SEO friendly. You save my life ^^
    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s