How do I add button on each row in datatable?

Question

I am newbie for DataTables. I want to add button on each row for edit and delete(like below image)

Answer 1

Basically your code is okay, thats the right way to do this. Anyhow, there are some misunderstandings:

1. fetchUserData.cfm does not contain key/value pairs. So it doesn't make sense to address keys in mData. Just use mData[index]

2. dataTables expects some more info from your serverside. At least you should tell datatables how many items in total are on your serverside and how many are filtered. I just hardcoded this info to your data. You should get the right values from counts in your server sided script.

   {
    "iTotalRecords":"6",
    "iTotalDisplayRecords":"6",
     "aaData": [
   [
       "1",
       "sameek",
       "sam",
       "sam",
       "sameek@test.com",
       "1",
       ""
   ],...
   

3. If you have the column names already set in the html part, you don't need to add sTitle.

4. The mRender Function takes three parameters:

   • data = The data for this cell, as defined in mData
   • type = The datatype (can be ignored mostly)
   • full = The full data array for this row.

So your mRender function should look like this:

  "mRender": function(data, type, full) {
    return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
  }

Find a working Plunker here