JQueryによるページ分割、PHPが動作しない

Question

問題：ページ分割リンクをクリックすると、スクリプトは新しい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> 

これは私のオフセットvaraibleです：$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);が機能していないため、テーブルが更新されていないため、これが動作しています。

注：複数のユーザーがデータを入力すると、全員にリアルタイムで更新したいので、間隔で表を更新します。

Answer 1

.load（ 'info.php #table'）には、ページパラメータがありません。

ページ（ "info.php"）を読み込み、次のページ設定リンク（url： "info.php"、data：{page：page}）をクリックすると動作しますが、再度.phpを実行して、データを置き換えます。

これには、「varページ」を移動する必要があります。 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); 

$オフセットを埋めるPHPは、$ _REQUESTとして、GETとPOSTの両方に対応する必要があります。