2017-11-09 1 views
0

HTML :Ajax 호출에서 Jquery Datatables 객체 또는 데이터 검색. .DATA()가 undefined를 반환합니다

<div class="tableStyle"> 
    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <h2 style="text-align: center;">SAMPLE</h2> 
      <tr> 
       <th>Commands</th> 
       <th>ID</th> 
       <th>Type</th> 
       <th>Name</th> 
       <th>PPU</th> 
       <th>$ Amount</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

JS

$("#dialog").dialog({ 
    autoOpen: false, 
    draggable: false, 
    resizeable: false, 
    height: 'auto', 
    width: 'auto', 
    buttons: { 
     Cancel: function() { 
     $(this).dialog("close"); 
     }, 
     Save: function() { 
     $ (this).dialog("close"); 
     } 
    } 
}); 

$.ajax({ 
    url: 'data.json', 
    success: function(data) { 
     var table = $('#example').DataTable({ 
       data: data, 
       "pagingType": "numbers", 
       'searchable': true, 
       'sort': true, 
       columns: [ 
        {data: null, 
        defaultContent: "<button id='edit'>Edit</button> <button id='delete'>Delete</button>" 
        }, 
        { data : 'id' }, 
        { data : 'type' }, 
        { data : 'name' }, 
        { data : 'ppu' }, 
        { data : 'amount', 
        render: function(amount) { 
         return '$' + amount; 
        }} 
       ] 
      }) 

      $('#example tbody').on('click', 'tr #edit', function() { 
       var data = table.row(this).data(); 
       console.log(data); 
       $('#dialog h1').html("Title"); 
       $('#dialog').dialog('open'); 
      }); 

      $('#example tbody').on('click', '#delete', function() { 
       alert('Delete this!'); 
      }); 
     } 
    }) 

그래서 난 그냥 버튼 클릭에 관련 행의 데이터를 잡고있다 달성하기 위해 노력하고있어 . 나는 모든 것을 시도해 보았고 매번 시도해 볼 때마다 정의되지 않았습니다. 나는 여전히 내 코드로 작업하고 있지만, 다음 단계로 진행할 수 있습니다. 사용하려고 시도했습니다. var data = table.row(this).data(); 매번 정의되지 않은 값을 반환합니다. 특정 취소 버튼을 클릭하여 관련 행 객체가 필요합니다. 버튼을 클릭하면 해당 객체 및 관련 행의 특정 정보를 표시하는 대화 상자가 열립니다. 누구든지 도울 수 있다면 큰 도움이 될 것입니다. 감사합니다

+0

어떤 브라우저를 사용하십니까? JQuery는 Safari/Opera에서 제대로 작동하지 않습니다. – DeveloperTK

+0

Google 크롬을 사용하고 있습니다. –

답변

0

이 문제는 table.row (this) .data() 오류를 사용하여 어떤 행의 색인을 먼저 찾은 다음 동일한 함수를 통해 색인을 전달하여이 문제를 해결했습니다.

var index = $(this).closest('tr').index() 
var data = table.row(index).data(); 

큰 두통없이 문제를 해결하는 가장 쉬운 방법 같았습니다.

관련 문제