title: Edit button on JQuery DataTable
body: <p>I am displaying a data using JQuery DataTable, and I want to make a edit button for each rows in that table.</p>
  
  <p>However, I have 2 problems which regarding that button.</p>
  
  <pre><code> 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.
  </code></pre>
  
  <p>Here is the code that I am using:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table id="tblMember"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Gender&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                      &lt;th&gt;Account&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#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 "&lt;button onclick='" + GetSelectedData(data) + "'&gt;&lt;i class='fa fa-pencil' aria-hidden='true'&gt;&lt;/i&gt;&lt;/button&gt;";
                      }
                  }
              ]
          });
      }
  
      function GetSelectedData(value) {
          window.location = "~/Registration.aspx?Name='" + value + "'";
      }
  </code></pre>
  
  <p>What I am missing?</p>
  
  <p>Your answer much appreciated.</p>
  
  <p>Thank you.</p>