Nies Nies - 1 year ago 152
ASP.NET (C#) Question

Edit button on JQuery DataTable

I am displaying a data using JQuery DataTable, and I want to make a edit button for each rows in that table.

However, I have 2 problems which regarding that button.

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.

Here is the code that I am using:


<table id="tblMember">


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

type: "POST",
data: aoData,
url: sSource,
dataType: "json",
success: function (msg) {

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

What I am missing?

Your answer much appreciated.

Thank you.

Answer Source

Well when I had a similar requirement I have created the button with property columnDefs but handled its click call outside of the DataTable definition.

I am providing the solution assuming your table is initializing properly except the edit button issue.

Demo :

Adding the edit button to your table :

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


Handling the click call of the edit button


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]); 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download