2017-08-22 7 views
2

のjQueryのDataTableの内部で二つのボタンをクリックして機能を追加します。私は編集のために動的に追加ボタンを備えたjqueryのデータテーブルを持っており、以下のように削除

ajaxLoadSuccess: function (data) { 
    var datatableVariable = $('#articleTable').DataTable({ 
     data: data, 
     columns: [ 
      { 'data': 'Topic' }, 
      { 'data': 'SubTopic' }, 
      { 'data': 'Title' }, 
      //{ 'data': 'ParsedText' }, 
      { 
       'data': 'AddedOn', 'render': function (date) { 
         var date = new Date(parseInt(date.substr(6))); 
         var month = date.getMonth() + 1; 
         return date.getDate() + "/" + month + "/" + date.getFullYear(); 
       } 
      }, 
      { 'data': 'AddedBy' }, 
      { 
       'data': 'Action', 'render': function (data, type, row, meta) { 
       return '<input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /> <input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" />'; 
       } 
      }] 
     }); 

そして:以下

Here is my datatable.

ことは、私のJSです以下はボタンクリックのコードです:

$("#articleTable tbody").on("click", "tr", function() { 
        alert($(this).text()); 
       }); 

上記の機能EditボタンまたはDeleteボタンをクリックするとイオンが鳴りますので、編集ボタンをクリックすると別の機能が起動されるように、削除ボタンの機能を追加します。どのように私はそれを味わうことができますか?

答えて

3

このコードでは、クリックイベントがトリガーされました。トリガするイベントをトリガする代わりに、特定のIDへのクリックイベントをトリガできます。ここでは、#btnEdit#btnDelete

ので、あなたのコードが

$(document).on('click', '#btnEdit', function() { 
    // Do something on edit 
}); 

$(document).on('click', '#btnDelete', function() { 
    // Do something on delete 
}); 
+2

これは常にIDでます選択すると、最初の行をクリックしてトリガするようにしたいと思いますそのIDを持つDOMの最初の要素を対象とします。 – Vanojx1

+0

IDの代わりにボタンのクラスを持っています –

+0

@RupeshJainあなたのコンテキストは何ですか? –

0

のように見えてきた私は、この

$("#articleTable tbody tr").on("click", "input", function() { 
    if ($(this).attr('id') == "btnEdit") { 
     fn_edit(); 
    } 
    else { 
     fn_delete(); 
    } 
});