在JQuery DataTable上編輯按鈕

Question

我正在使用JQuery DataTable顯示數據，並且我想爲該表中的每行創建一個編輯按鈕。

但是，我有2個關於那個按鈕的問題。

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. 

這裏是我使用的代碼：

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 + "'"; 
    } 

什麼我失蹤？

您的回答非常感謝。

謝謝。

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]); 
});