使用 JQuery 进行分页，PHP 无法正常工作答案

【问题标题】：Pagination with JQuery, PHP not working使用 JQuery 进行分页，PHP 无法正常工作
【发布时间】：2017-03-20 18:01:12
【问题描述】：

问题：当我单击分页链接时，脚本正在生成新的 html 表格内容，但它没有在浏览器中刷新表格。

我有一个名为showUsers($limit, $offset) 的方法的类用户，它正在获取我需要的所有数据并将其显示在表格中。

  <table id="table" class="table table-striped table-bordered table-hover table-sm">
    <thead class="thead-default">
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Nickname</th>
        <th>User ID</th>
      </tr>
    </thead>
    <?php $user->showUsers($limit, $offset); ?>
  </table>

这是我的偏移量变量：$offset = ($page - 1) * $limit，$page 是按下的分页链接的编号。

这就是我生成分页链接的方式：

  <div class="col-sm-9 mx-auto">
    <?php
      for ($i=1; $i <= $allPages ; $i++) {
        echo "<span class='pag-link' id='$i' style='cursor: pointer; padding: 6px; border: 1px solid #ccc; margin: 3px;'>". $i. "</span>";
      } 
    ?>
  </div>

这是我的 JS 脚本：

    //pagination-link handler.
    $('.pag-link').click(function(){
      var page = $(this).attr("id");
      console.log(page);
      $.ajax({
         type: "POST",
         url: "info.php",
         data: {page: page},
         success: function(data){
             console.log(data); // show response from the php script.
         }
       });
   });
   setInterval(function(){ $(`#table`).load('info.php #table'); }, 1000);

注意：setInterval(function(){ $("#table").load('info.php #table'); }, 1000); 应该获取表格中的 HTML，并使用新表格更新浏览器中的表格。

因此，当我单击时，会在 info.php 文件中发送一个页面编号。这会更改我的 $offset 变量，showUsers($limit, $offset) 方法将生成具有不同数据的新表。
现在这是可行的，因为我看到了在 javascript 控制台中生成的所有新 HTML，但 setInterval(function(){ $("#table").load('info.php #table'); }, 1000); 不工作并且我的表没有更新。

注意：我想间隔刷新表格，因为如果多个用户输入数据我希望它实时更新给每个人。

【问题讨论】：

有人有什么建议吗？

标签： javascript php jquery pagination

【解决方案1】：

.load('info.php #table') 没有页面参数。

因此，您加载页面（“info.php”），单击下一个分页链接（url：“info.php”，数据：{page：page}），然后就可以了，但是计时器会加载信息。再次php，替换数据。

这需要移动“var page;”到 Javascript 的顶部，在函数调用之外：

    //pagination-link handler.
    var page=1;
    $('.pag-link').click(function(){
      page = $(this).attr("id");
      console.log(page);
      $.ajax({
         type: "POST",
         url: "info.php",
         data: {page: page},
         success: function(data){
             console.log(data); // show response from the php script.
         }
       });
   });
   setInterval(function(){ $(`#table`).load('info.php?page='+page+'#table'); }, 1000);

填充$offset 的PHP 需要同时响应GET 和POST，例如$_REQUEST。

【讨论】：