JQuery DataTableの編集ボタン

Question

JQuery DataTableを使用してデータを表示していて、そのテーブルの各行に対して編集ボタンを作成したいとします。

しかし、私はそのボタンに関して2つの問題があります。

HTML：：

<table id="tblMember"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Gender</th> 
        <th>Status</th> 
        <th>Account</th> 
        <th>Action</th> 
       </tr> 
      </thead> 
     </table> 

JS：

$('#tblMember').dataTable({ 
      bProcessing: true, 
      bServerSide: true, 
      iDisplayLength: 10, 
      sAjaxSource: "~/MemberService.ashx", 
      fnServerData: function (sSource, aoData, fnCallback) { 
       aoData.push({ "name": "GroupAccount", "value": "Account" }) 

       $.ajax({ 
        type: "POST", 
        data: aoData, 
        url: sSource, 
        dataType: "json", 
        success: function (msg) { 
         fnCallback(msg); 

         $("#tblMember").dataTable().show(); 
        } 
       }); 
      }, 
      columnDefs: [ 
       { 
        width: "10%", 
        className: "dt-body-center", 
        targets: -1, 
        data: "Name", 
        render: function (data, type, full, meta) { 
         return "<button onclick='" + GetSelectedData(data) + "'><i class='fa fa-pencil' aria-hidden='true'></i></button>"; 
        } 
       } 
      ] 
     }); 
    } 

    function GetSelectedData(value) { 
     window.location = "~/Registration.aspx?Name='" + value + "'"; 
    } 

を私が行方不明です何ここ

1. Once I run the application, the Edit button will trigger automatically (which redirect to the new page). 
2. I want to get the information of the first column of the selected row, but what I got is undefined value. 

は、私が使用しているコードのですか？

あなたの回答は高く評価されています。

ありがとうございます。

Answer 1

よく似た要件があるときは、columnDefsのボタンを作成しましたが、DataTableの定義外のクリックコールを処理しました。

私は、あなたのテーブルが編集ボタンの問題を除いて正しく初期化されていると仮定して解決策を提供しています。

デモ：https://jsfiddle.net/Prakash_Thete/j3cb2bfo/5/

があなたのテーブルに編集ボタンを追加：と仮定すると、編集ボタン

のクリックコールの取り扱い

"columnDefs": [ 
    { 
     className: "dt-body-center", 
     targets: -1, 
     defaultContent: ["<i class='fa fa-pencil editButton' aria-hidden='true' aria-hidden='true'></i>"] 

    } 
] 

var memberTable = $('#tblMember').dataTable({

次に

$('body').on('click', '#tblMember tbody tr .editButton', function() { 
    var rowData = memberTable.row($(this).parents('tr')).data(); 
    console.log("Rows data : ", rowData); 

    //fetch first column data by key if you are passing map as input to table 
    console.log("First column data : ", rowData[0]); 
});