如何使用jquery ui滑块创建分页效果并在<；中加载内容；部门>；？_Jquery_Ajax_Jquery Ui_Pagination_Slider

如何使用jquery ui滑块创建分页效果并在<；中加载内容；部门>；？

jquery ajax jquery-ui pagination

如何使用jquery ui滑块创建分页效果并在<；中加载内容；部门>；？,jquery,ajax,jquery-ui,pagination,slider,Jquery,Ajax,Jquery Ui,Pagination,Slider,我想使用jQueryUI的滑块小部件创建分页脚本。到目前为止，我已经让滑块工作，但我不知道如何发送请求到服务器获取新内容到目前为止，这是我的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery UI Slider - Range slider</title> <link type=

我想使用jQueryUI的滑块小部件创建分页脚本。到目前为止，我已经让滑块工作，但我不知道如何发送请求到服务器获取新内容

到目前为止，这是我的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>


jqueryui滑块-范围滑块
正文{padding:5em；}
$（函数（）{
$（“#滑块范围”）。滑块({
民:1,，
最高：14，
值：[1]，
幻灯片：功能（事件、用户界面）{
$（“.values”）.html（ui.values[0]；）；
}
});
});
此处是显示内容的位置。

提前感谢

好的，您可以在滑块的幻灯片事件中发送请求，向服务器发送请求，将获取的数据放入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
     }
?>
?>

这是我一直想做的事情-对我来说似乎很直观，但我从未见过它的实现。感谢您的快速响应，但您能否也上传一个您提到的content.php
示例