我想使用jQuery UI的滑块小部件创建一个分页脚本。到目前为止，我已经可以使用滑块了，但是我不知道如何将请求发送到服务器以获取新内容。
到目前为止，这是我的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>
提前致谢
最佳答案
好吧，您可以在滑块的Slide事件上发送请求，以将获取的数据放在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
}
});
更新
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
}
?>
?>
关于jquery - 如何使用jquery ui滑块创建分页效果并将内容加载到<DIV>中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3035690/