REST는 JSON 응답을 jQuery 데이터 테이블에 추가하는 방법을 추가 하시겠습니까?

Question

jQuery에서 REST 호출 JSON 응답을 표시하려고합니다. datatables.

다음은 내가받는 JSON 응답입니다.

{ 
    "artifact": [ 
     { 
      "artifactId": "I8cc4a96ef69a11e08b448cf533780ea2", 
      "batchId": "15581", 
      "processId": "115458787" 
     }, 
     { 
      "artifactId": "e08b448cf533780ea2I8cc4a96ef69a11", 
      "batchId": "14962", 
      "processId": "787974254" 
     } 
    ] 
} 

스크립트 :

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#artifacts").dataTable({ 
       "sPaginationType": "full_numbers", 
       "bJQueryUI": true 
      }); 
     }); 
     function submitForm() 
     { 
      $.getJSON('http://myurl.com/JerseySample/rest/search', function(data) { 
       $.each(data.artifact, function(i,artifact){ 
         $('#artifacts').datatable().fnAddData([ 
           artifact.artifactId, 
           artifact.batchId, 
           artifact.processId ] 
           ); 
       }); 
      }); 
     } 
</script> 

html로 :

<form class="searchform"> 
     <input class="searchfield" type="text" /> 
     <input class="searchbutton" type="button" value="Go" id="go" onclick="submitForm()" /> 

</form> 
    <div id="container"> 
     <div id="demo_jui"> 
      <table id="artifacts" class="display"> 
        <thead> 
          <tr> 
           <th>Artifact Id</th> 
           <th>Batch Id</th> 
           <th>Legacy Id</th> 
          </tr> 
        </thead> 
        <tbody> 
        </tbody> 
      </table> 
     </div> 
    </div> 

누군가가 내가 데이터 테이블에 JSON 응답을로드 할 수 없습니다입니다 이유에 대한 답을 제공 할 수 있습니까? 이 기능을 사용하기위한 더 좋은 방법이 있습니까?

Answer 1

당신은 모든 일을 올바르게하고 있습니다. 신참 한 실수를하고 있습니다. 그리워지기 쉽습니다.

당신은 당신이 새로운 데이터 테이블 인스턴스를 만들

$("#artifacts").dataTable(); 

을 수행 할 때. Datatables는 해당 호출에 대해 API 함수를 사용하여 객체 인스턴스를 반환하지만 사용자가 방금 만든 데이터 테이블에 대한 모든 참조를 잃어 버리면 어디서나 해당 인스턴스를 저장하지 않습니다.

은

$.each(data.artifact, function(i,artifact){ 
    thisTable.fnAddData(
     [ 
      artifact.artifactId, 
      artifact.batchId, 
      artifact.processId 
     ] 
    ); 
}); 

가 여기에 행동에 그것을 볼 수있는 JSFiddle example의 당신의 각 기능에서 그것을 그렇게

var thisTable = $("#artifacts").dataTable(
    { 
     "sPaginationType": "full_numbers", 
     "bJQueryUI": true 
    } 
); 

처럼 만든 데이터 테이블에 대한 참조를 추가 한 다음 참조,이 문제를 해결합니다.

datatables.net의 예제는 참조를 추가 할 필요없이 인라인 API 호출을 수행하기 때문에 상당히 좋지 않습니다. 아래의 multi filtering에 나와있는 예에서보다 잘 보여줍니다.

또한 API documentation에서 읽을 수 있습니다.
힌트 : 그것은 $