2012-07-13 4 views
2

테이블을 만드는 별도의 .php 파일에서 dataTable을 초기화하려고합니다. 테이블을 만들지 만 dataTable 속성이 유효하지 않은 것 같습니다.별도의 .php 테이블에서 dataTable 초기화

index.php를

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <script type="text/javascript" language="javascript" src="jquery.js"></script> 
     <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('#live_table').load("table.php"); 
       var refreshId = setInterval(function() { 
        $('#live_table').load("table.php"); 
       }, 2000); 
       $.ajaxSetup({ cache: false }); 
       $('#data').dataTable(); 
      }); 
     </script> 
     <title></title> 
    </head> 
    <body> 
     <div id="live_table"> 
     </div> 
    </body> 
</html> 

table.php

<table id="data"> 
    <thead> 
     <tr> 
      <th>Foo</th> 
      <th>Bar</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table> 

의 index.php 모든 2000ms 및 table.php 실제로 테이블을 갱신하기위한 것입니다 : 여기

내 코드입니다 내 실제 상황에서 좀 더 복잡하고 조건부 셀 배경 및 링크가 필요합니다. 따라서 표 데이터에 서버 측 처리 (JSON)를 사용하지 않기로 선택했습니다.

$('#data').dataTable(); 명령이 작동하지 않는 이유는 무엇입니까? 그것은 문제처럼 보인다

+0

, 나는 여전히 빠르고 쉽게 서버 측을 사용하는 것입니다 긍정적입니다. 그러나 귀하의 질문에 답하기 위해 좀 더 자세한 정보가 필요합니다. 어떤 속성이 적용되지 않는지 등. 그것은 전혀 작동하지 않습니다, 당신은 스타일을 볼 수 있지만 테이블/기능을 볼 수 없습니까? – Drakkainen

+0

정상적인 HTML 형식의 표는 "dataTable"표처럼 보이지 않습니다. –

+1

동작을 재현했습니다 : http://jsfiddle.net/sAnUL/ – mellamokb

답변

2

난 당신이 아직 존재하지 않는 선택기를 사용하고 있기 때문에로드하지 생각합니다.

시도 :

$(document).ready(function() { 
      $('#live_table').load("table.php"); 
      var refreshId = setInterval(function() { 
       $('#live_table').load("table.php"); 
      }, 2000); 
      $.ajaxSetup({ cache: false }); 
      $('#data').dataTable(); //This line should be in table.php 

가 기술적으로 DOM에는 요소 #data이 없습니다. table.php 파일에 테이블 초기화를 넣어야합니다.

2

.load 호출이 비동기 적으로 발생하기 때문에 테이블이 실제로로드되고 나머지 코드가 실행 계속하기 전에 .dataTable()에 대한 호출이 발생합니다. 당신은 요청이 .load에 세 번째 매개 변수를 사용하여 완료 한 후 .dataTable()를 호출해야합니다

$('#live_table').load(
    "table.php", 
    {}, 
    function() { $('#data').dataTable(); } 
); 

데모 : http://jsfiddle.net/sAnUL/1/

+0

왜 그런지 잘 모르겠습니다 만 나에게 도움이되지 않습니다.방금 table.php에 $ ('# data'). dataTable();을 넣었습니다. 감사! –

2

당신은 load() 방법의 콜백 기능을 사용할 수 있습니다 :

$('#live_table').load("table.php", function(){ 
    $('#data').dataTable(); 
}); 

또는 ajaxSuccess()를 사용

함수를 연결 실행되는 Ajax 요청이 성공적으로 완료 때마다. 이것은 Ajax 이벤트입니다. 당신이 말한대로 복잡하더라도

$('#data').ajaxSuccess(function(){ 
    $(this).dataTable() 
})