Ajax Pagination with Jquery,PHP,Mysql

This is my first experiment in Ajax (I don’t know how to explain this, many thanks if experts give me some tips).

Many thanks to http://yensdesign.com , this post http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ of him just give me an idea to do this.

This Package can load data from table and with all fields.
This contains 5 files
1. content.php (php file that get data from db and send back to the test.php file)
2. test.php (this is the file to be run, before run we must set 7 variables)
3. jquery.js
4. paging.js (this contains the script to sendajax request and get the data)
5. testDB.txt (sample mysql db file)

How to use:
1. Edit test.php and set the 7 variables – per_page, db_name, table_name, order_by then connection variables hostname, username, password
2. Make sure the table exist, correct connection variables and dont miss to set the order_by variable
3. Run test.php

How script works
This is how the paging.js script works
1)
showLoading and hideLoading are functions to show/hide the loading div
2)
When a page no clicked, will call pages.click fucntion, then
show the loading div
reset the page link – make the currently clicked page highlighted
set the url to be sent to the content.php page with page number and all other 7 variables set before
call content.load(url,hideLoading)
3)
initially set the first page loaded

Advantages:
No need to specify the table fields, it will fetch all column names and show them automatically
Configuration settings at only one place
Simple and easy to understand (i hope), not much css works here, so we can change the appearance as we want

test.php (change settings/css here)

	Ajax Load Table - Pagination -  yensdesign.com

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



<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td>
<ul>
				&lt;?php
				//Show page links
				for($i=1; $i&lt;=$pages; $i++)
				{
					echo &#039;
	<li>'.$i.'</li>
';
				}
				?&gt;</ul>
</td>
</tr>
<tr>
<td>
<div id="loading" style="position:absolute;">
					LOADING...</div></td>
</tr>
<tr>
<td>
<div id="content" style="height:200px;"></div>

					
					
					
					
					
					
					
				</td>
</tr>
</table>
</div>

	

paging.js (no need to change anything)

$(document).ready(function(){
	//References
	var pages = $("#menu li");
	var loading = $("#loading");
	var content = $("#content");

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};

	//Manage click events
	pages.click(function(){
		//show the loading bar
		showLoading();

		//Highlight current page number
		pages.css({'background-color' : ''});
		$(this).css({'background-color' : 'yellow'});

		//Load content
		var pageNum = this.id;
		var targetUrl = "content.php?page=" + pageNum + "&" + $("#myForm").serialize() + " #content";
		content.load(targetUrl, hideLoading);
	});

	//default - 1st page
	$("#1").css({'background-color' : 'yellow'});
	var targetUrl = "content.php?page=1&" + $("#myForm").serialize() + " #content";
	showLoading();
	content.load(targetUrl, hideLoading);
});

content.php (process request and send response)

Result


<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>

Full Source
click to see live DEMO here