2017-11-09 4 views
0

HTML:Jqueryのデータは、Ajax呼び出しからオブジェクトまたはデータを取得します。 .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

どのブラウザをお使いですか? Safari/OperaではJQueryが正しく動作しません。 – DeveloperTK

+0

Google Chromeを使用しています。 –

答えて

0

この問題は、最初に使用していた行のインデックスを見つけてから、同じ関数でインデックスを渡すことでtable.row(this).data()エラーで修正されました。

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

これは大きな頭痛のない問題を解決する最も簡単な方法のようでした。

関連する問題