[AJAX] Pagination php jquery

Bonsoir je suis entrain de réaliser un système de pagination voici mon code:

pagination.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?php
include('config.php');
$per_page = 9; 
 
//getting number of rows and calculating no of pages
$sql = "select * from paginate";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
 
<html>
<head>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
	<script type="text/javascript">
 
	$(document).ready(function(){
 
	function Display_Load()
	{
	    $("#loading").fadeIn(900,0);
		$("#loading").html("<img src='bigLoader.gif' />");
	}
 
	function Hide_Load()
	{
		$("#loading").fadeOut('slow');
	};
 
	$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
 
	Display_Load();
 
	$("#content").load("pagination_data.php?page=1", Hide_Load());
 
	$("#pagination li").click(function(){
 
		Display_Load();
 
		$("#pagination li")
		.css({'border' : 'solid #dddddd 1px'})
		.css({'color' : '#0063DC'});
 
		$(this)
		.css({'color' : '#FF0084'})
		.css({'border' : 'none'});
 
 
		var pageNum = this.id;
 
		$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
	});
 
 
});
	</script>
 
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;
 
}
 
a:hover
{
 
color:#DF3D82;
text-decoration:underline;
 
}
#loading { 
width: 100%; 
position: absolute;
}
 
#pagination
{
text-align:center;
margin-left:120px;
 
}
li{	
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd;
color:#0063DC; 
}
li:hover
{ 
color:#FF0084; 
cursor: pointer; 
}
 
</style>
</head>
<body>
 
	<div align="center">
 
	<div id="loading" ></div>
	<div id="content" ></div>
 
	<table width="800px">
	<tr><Td>
			<ul id="pagination">
				<?php
				//Show page links
				for($i=1; $i<=$pages; $i++)
				{
					echo '<li id="'.$i.'">'.$i.'</li>';
				}
				?>
	</ul>	
	</Td></tr></table>
 
</body>
<a href="">Tri par Ville</a>
</html>
 
</body>

pagination_data.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
 
include('config.php');
 
$per_page = 9; 
 
if($_GET)
{
$page=$_GET['page'];
}
 
//get table contents
$start = ($page-1)*$per_page;
$sql = "select * from paginate order by id limit $start,$per_page";
$rsd = mysql_query($sql) or die(mysql_error());
?>
 
 
	<table width="800px">
 
		<?php
 
 
		while($row=mysql_fetch_array($rsd)){
 
 
			$id=$row['name'];
            $msg=$row['message'];
 
		?>
		<tr><td style="color:#B2b2b2; padding-left:4px" width="30px"><?php echo $id; ?></td><td><?php echo $msg; ?></td></tr>
		<?php
		} 
		?>
	</table>

config.php

Code:

1
2
3
4
5
6
7
8
9
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "dbname";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

maintenant au niveau de ma page pagination je veux que lorsqu'on clique sur le lien tri par ville que la requête s'effectue sur la page pagination_data.php pour ne pas créer d'autres pages à niveau et sur ce même page(tri par ville) d'afficher aussi un système de pagination comment faire cela merci d'avance