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

2019-12-02 03:26:14 阅读：203 来源： 互联网

标签：ajax pagination javascript mysql php

现在,我使用的分页系统需要网址

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,它将来自不同页面的新内容加载到#content div中

<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,当用户单击页面链接时,有三个选项可供选择：

>只需加载页面即可更改网址
>使用HTML5 history.pushState(请参阅MDN resource)(如果受支持),并将选项3作为不支持的浏览器的后备
>使用#page1,#page1等作为链接的href值,以便用户知道他们在哪个页面上并解析php中url的值：

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

标签：ajax,pagination,javascript,mysql,php
来源： https://codeday.me/bug/20191202/2085581.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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