2017-03-20 1 views
1

문제점 : 페이지 매김 링크를 클릭하면 스크립트가 새로운 HTML 테이블 컨텐츠를 생성하지만 브라우저의 테이블을 새로 고치지 않습니다.JQuery로 페이지 매김, PHP가 작동하지 않습니다.

나는 필요한 모든 데이터를 가져 와서 테이블에 표시하는 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) 메소드는 다른 데이터로 새로운 테이블을 생성합니다.
자바 콘솔에서 생성 된 모든 새 HTML이 표시되지만 setInterval(function(){ $("#table").load('info.php #table'); }, 1000);이 작동하지 않고 내 테이블이 업데이트되지 않아 작동 중입니다.

참고 : 여러 사용자가 데이터를 입력하면 실시간으로 모든 사용자에게 업데이트되기를 원하기 때문에 간격으로 표를 새로 고침하고 싶습니다.

+0

Somone 의견이 있습니까? –

답변

0

.load ('info.php #table')에는 페이지 매개 변수가 없습니다.

페이지 ("info.php")를로드하고 다음 페이지 번호 매김 링크 (url : "info.php", 데이터 : {page : page})를 클릭하면 작동하지만 타이머 정보 .php 다시 데이터를 대체합니다.

"var page;"를 이동해야합니다. 함수 호출 외부 자바 스크립트의 상단에 :

//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의에 응답해야합니다 오프셋 $을 채 웁니다 모두 GET과 POST, 같은 $ _REQUEST있다.