用于PHP的AJAX分页解决方案

AJAX pagination solution for PHP

本文关键字：分页 解决方案 AJAX PHP 用于      更新时间：2023-09-26

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

这样的url

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分页系统，(例如，有些地方比较滞后，大多数情况下，用户每次点击下一页时都需要滚动到顶部，因为当他们点击下一页时，他们停留在页面的底部。)等)

所以我决定问你很多，如果有人有一个有效的分页解决方案，与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>

jQuery，从不同的页面加载新内容到#contentdiv

<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>

分页并不像你想象的那么难，你可以使用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>

关于url，当用户单击页面链接时，您有三个选项可供选择:

  1. 直接加载页面，不改变url
  2. 使用HTML5 history.pushState(见MDN资源)，如果支持，并与选项3作为不支持的浏览器的备用

  3. 使用#page1, #page1等作为链接的href值，以便用户知道他们在什么页面上，并解析php中的url值:

    $uri = explode('#page', $_SERVER['REQUEST_URI']);
$pageNumber = intval($uri[1]);

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

加载后，它会使一个ajax调用names.php?Page =$ Page并将结果传递给处理程序，该处理程序将结果呈现给用户。

然后在链接到"返回"answers"下一个"，我会放一个javascript函数，首先设置$page到前一个或下一个数字，然后调用names.php?Page =$ Page并将结果传递给相同的处理程序

相关文章：