June 14, 2010
How to use jquery ui slider to create a pagination effect and load the content in a <DIV>?
Question by user366106
I want to create a pagination script using jquery UI’s slider widget. So far I have got the slider working but I dont know how to send request to the server to fetch new content.
So far this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Slider - Range slider</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.slider.js"></script>
<style type="text/css">
body { padding:5em; }
</style>
<script type="text/javascript">
$(function() {
$("#slider-range").slider({
min: 1,
max: 14,
values: [1],
slide: function(event, ui) {
$(".values").html(ui.values[0];);
}
});
});
</script>
</head>
<body>
<div class="values" style="padding:2em;"></div>
<div id="slider-range"></div>
<div class="info" style="margin-top:2em; background:#CCC;padding:2em;">
Here is where the content will be displayed.
</div>
</body>
Thanks in Advance
Answer by Starx
Well, You can send a request at the slide event of your slider to send a request to the server at put the fetched data inside a div
$("#slider-range").slider({
min: 1,
max: 14,
values: [1],
slide: function(event, ui) {
var newPage = ui.values[0];
$(".info").load("content.php", { page: newPage });
//load the content into a division
}
});
UPDATED
a sample of content.php
<?
$recordsperpage = 15;
if(!isset($_POST['page'] or empty($_POST['page']) { $page =1 ; }
else { $page = $_POST['page']; }
$limit = $page * $recordsperpage.",".$recordsperpage;
$query = "SELECT * FROM yourtable LIMIT ".$limit;
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
//Display the records in your pattern
}
?>
?>
