Uncaught TypeError：未定義の '_aData'プロパティを読み取ることができません

Question

データテーブルに関して問題が発生しました。データテーブルからデータを編集しようとしましたが、データテーブルが更新/削除ボタンが機能しなくなった後、この種のエラーUncaught TypeError: Cannot read property '_aData' of undefinedがスローされます。

ここは、データテーブルのUIです。 Datatable image here.

ここは編集のためのイベントのコードです。

$('#template_table tbody').on('click','.update',function(){ 
    var closestRow = $(this).closest('tr'); 
    var data = templateTable.row(closestRow).data(); 
    console.log(data); 
    tableId = data.id; 
    $('#modal-title').text('Update Template'); 
    $('#alert_lvl').val(data.alert_lvl); 
    $('#internal_alert').val(data.internal_alert); 
    $('#scenario').val(data.possible_scenario); 
    $('#response').val(data.recommended_response); 
    $('#submit_template').text("UPDATE"); 
    $('#template_modal').modal('toggle'); 
}); 

これは、データテーブルを更新して更新されたものを表示するための保存機能です。

function reloadTable() { 
    $('#template_table').DataTable().clear(); 
    $('#template_table').DataTable().destroy(); 
    template_table = $('#template_table').DataTable({ 
     "processing": true, 
     "serverSide": false, 
     "scrollX": true, 
     "ajax": '../communications/fetchalltemplate', 
     columns: [ 
      { "data" : "id" , title:"ID"}, 
      { "data" : "alert_lvl", title:"ALERT LEVEL"}, 
      { "data" : "internal_alert", title:"INTERNAL ALERT"}, 
      { "data" : "possible_scenario", title:"POSSIBLE SCENARIO"}, 
      { "data" : "recommended_response", title:"RECOMMENDED RESPONSE"}, 
      { "data" : "last_update_by", title:"LATEST MODIFICATION"}, 
      { "data" : "functions", title: "*"} 
     ] 
    }); 
} 

もし私が再び更新をヒットした場合。私はここでこの部分に誤りを投げます。

var data = templateTable.row(closestRow).data(); 

ありがとうございました。

Answer 1

でやりたいことができます私は、DataTableの私はデータテーブルをリロードするたびに初期化し、それが正常に働いていました。

reloadTable関数の下。

var templateTable = $('#template_table').DataTable();

Answer 2

あなたのコードの問題は、closestRowという変数で宣言されています。

jQuery docsによれば、.closest（）関数はDOM を越えて、を横切る最も近い要素（指定されたセレクタを尊重）を検索します。

これは、このアクションを表の本文のクリックにバインドするため、基本的にはその表の親の中で<tr>要素を検索していることを意味します。

あなたが別の選択方法

var closestRow = $(this).children('tr:first');