Question

现在我使用的分页系统需要像

这样的网址

http://mypage.com/index.php?page=1
http://mypage.com/index.php?page=2
http://mypage.com/index.php?page=3
http://mypage.com/index.php?page=4
等...

所以它使用$ _GET方法来找出用户所在的页面。我决定将我的大部分网站切换到ajax并遇到问题。当我使用Ajax在页面上加载新内容时，url始终保持不变，例如http://mypage.com/index.php。因此我使用的分页系统是无用的。我无法找到有效的AJAX分页系统（例如，一些lagy，大多数需要用户在每次点击下一页时滚动到tiop，因为当他们点击下一页时他们停留在页面的底部等等......）

所以我决定问你是否有人有一个与ajax一起使用的高效分页解决方案。

需要分页的示例：

$sql = mysql_query("SELECT * FROM myMembers WHERE username='$username' LIMIT 1") or die (mysql_error("There was an error in connection"));

//Gather profile information
while($row = mysql_fetch_assoc($sql)){ 
$username = $row["username"];
$id = $row["id"];

$data_display .= '<b>'.Name.'</b> has an id of <span style="color: f0f0f0;">'.$id.'</span>';

}

<!doctype>
<html>
<?php echo "$data_display"; ?> //and I need to paginate this entries
</html>

将来自不同网页的新内容加载到#content div

的jQuery

<script type="text/javascript">
function viewHome(){
    $('#woodheader').load("inc/home_top.php", function () {
            $(this).hide().fadeIn(700)
        });
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php", function () {
            $(this).hide().fadeIn(700)
        });
}
function viewAbout(){
    $('#woodheader').load("inc/about_top.php", function () {
            $(this).hide().fadeIn(700)
        });
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/about.php", function () {
            $(this).hide().fadeIn(700)
        });
}
function viewProducts(){
    $('#woodheader').load("inc/products_top.php", function () {
            $(this).hide().fadeIn(700)
        });
     $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/products.php", function () {
            $(this).hide().fadeIn(700)
        });
}
</script>

Answer 1

分页并不像你想象的那么难，你可以使用jQuery的load()函数将内容加载到包含页面内容的元素中。

例如，你有：

<div id="page-content"></div>
<a href="#" id="link1">Page 1</a>
<a href="#" id="link2">Page 1</a>
<a href="#" id="link3">Page 3</a>

<script>
$.ready(function(){
  var currPage = <?=$pageNumber; ?>; // The page number loaded on page refresh
  $('#link1,#link2,#link3').onclick(function(){
    // Get the first number inside the id
    var pageNum = parseInt($(this).attr('id'));

    // Don't load the same page
    if(currPage == pageNum) return;

    // Show loading animation or whatever

    // Load the page using ajax
    $('#page-content').load('pages.php?page='+pageNum, function(){
      // End loading animation
      currPage = pageNum;
    });

    return false; // Important for not scrolling up
  });
});
</script>

关于网址，当用户点击网页链接时，您有三个选项可供选择：

只需加载页面而不更改网址
如果支持，请使用HTML5 history.pushState（请参阅 MDN resource ），选项3作为不受支持的浏览器的后备补充
使用#page1，#page1等作为链接的href值，以便用户知道他们在哪个页面上并解析php中url的值：
```
$uri = explode('#page', $_SERVER['REQUEST_URI']);
$pageNumber = intval($uri[1]);
```

Answer 2

我会创建一个最初不加载任何$ data_display的index.php。在javascript内部我会保留一个名为$ page的变量，该变量最初等于1。

加载后，它会对names.php？page = $ page进行ajax调用，并将结果传递给将其呈现给用户的处理程序。

然后在“返回”和“下一步”的链接上，我会把一个javascript函数首先设置$ page到上一个或下一个数字，然后调用names.php？page = $ page并将结果传递给它处理程序。

适用于PHP的AJAX分页解决方案

2 个答案: