<?php
/*
this example is used to obtain a number of data with display limitation into the pages, with jQuery .load() plus CSS Rules. related with data.php
author: usman didi khamdani
author's email: usmankhamdani@gmail.com
author's phone: +6287883919293
*/
$host = "localhost"; // database host name
$user = "root"; // database user name
$password = ""; // database user password
$db = "test"; // database name
$host_conn = mysql_connect($host,$user,$password); // connect to host
if(!$host_conn) {
die(mysql_error());
}
$db_conn = mysql_select_db($db, $host_conn); // connect to database
if(!$db_conn) {
die(mysql_error());
}
$auth_query = "SELECT DISTINCT(Author) FROM book ORDER BY Author";
$auth_list = mysql_query($auth_query);
if(!$auth_list) {
die(mysql_error());
}
$auth_sum = mysql_num_rows($auth_list);
?>
<!doctype html>
<html lang="en">
<head>
<title>Paging Class :: Page with jQuery .load() plus CSS Rules</title>
<style type="text/css">
body { font: 80% sans-serif,Verdana; color:#111 }
a { color:#f00;text-decoration:none; }
a:hover { color:#00f; }
#display_content h3 { text-align: center }
#content { border: 1px solid #111; margin-left:auto;margin-right:auto; width:80% }
#content th { background: #111; color:#fff; padding: 5px 10px }
#content td { border: 1px solid #111; text-align: left; padding: 5px 10px }
.first_offline, .prev_offline, .next_offline, .last_offline { display:none; }
.page_online { color:#000; }
.page_offline { color:#00f; font-size: 120%; font-weight:bold; text-decoration:underline; }
.page_thumbnail { text-align:center; padding: 10px }
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form[name=show_book]').submit(function(e) {
e.preventDefault();
var author = $(this).find("select[name=auth]").val();
var param = "auth="+author;
$("#display_content").load("data.php?"+param+" div#display_content");
$(".page_thumbnail").load("data.php?"+param+" div.page_thumbnail");
});
$('.paging').live("click",function(e) {
e.preventDefault();
var target = $(this).attr("href");
var param = target.split("?");
$("#display_content").load("data.php?"+encodeURI(param[1])+" div#display_content");
$(".page_thumbnail").load("data.php?"+encodeURI(param[1])+" div.page_thumbnail");
});
});
</script>
</head>
<body>
<h3>Page with jQuery .load() plus CSS Rules</h3>
<div id="display_content"></div>
<div class="page_thumbnail"></div>
<form name="show_book">
<p>Author <select name="auth"><?php if($auth_sum>0) while($a=mysql_fetch_array($auth_list)) { echo '<option value="'.rawurlencode($a[0]).'">'.$a[0].'</option>'; } ?></select> <input type="submit" value="Show Book" /></p>
</form>
<hr />
<p><a href="example1.php">Example 1: Page without $_GET variable plus CSS Rules</a><br />
<a href="example2.php">Example 2: Page with $_GET variable(s)</a></p>
</body>
<html>
|
Download
