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)

I have tried with code:

Test.cfm

<table id="myDataTable" class="table table-striped table-bordered"> <thead>     <tr>         <th>UserID</th>         <th>Name</th>         <th>UserName</th>         <th>Passowrd</th>         <th>Email</th>          <th>IsActive</th>          <th>Command</th>     </tr> </thead> <tbody>  </tbody> 

$(document).ready(function () {     var oTable = $('#myDataTable').dataTable({        // "bServerSide": true,         "sAjaxSource": "fetchUserData.cfm",         "bProcessing": true,         "sPaginationType": "full_numbers",         "aoColumns": [             { "mData": null },             { "mData": "Name", "sTitle": "Name" , "sWidth": "20%"},             { "mData": "UserName", "sTitle": "UserName", "sWidth": "20%" },             { "mData": "Passowrd","sTitle": "Passowrd", "sWidth": "20%"  },             { "mData": "Email","sTitle": "Email"  , "sWidth": "20%"},             { "mData": "IsActive","sTitle": "IsActive" , "sWidth": "20%" },             {                 "mData": null,                 "bSortable": false,                "mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }             }         ]     });  } ); 

fetchUserData.cfm

{ "aaData": [     [         "1",         "sameek",         "sam",         "sam",         "[email protected]",         "1",         ""     ],     [         "2",         "arun singh",         "arun",         "arun",         "[email protected]",         "0",         ""     ],     [         "9",         "s s",         "sam3",         "sam3",         "[email protected]",         "0",         ""     ],     [         "10",         "sameek mishra",         "sam56",         "sam",         "[email protected]",         "0",         ""     ],     [         "11",         "narendra kumar",         "narendra",         "nav",         "[email protected]",         "1",         ""     ],     [         "12",         "test test",         "test",         "test",         "[email protected]",         "1",         ""     ] ]  } 

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",     "[email protected]",     "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

Answer 2

var table =$('#example').DataTable( {     data: yourdata ,     columns: [         { data: "id" },         { data: "name" },         { data: "parent" },         { data: "date" },          {data: "id" , render : function ( data, type, row, meta ) {               return type === 'display'  ?                 '<a href="<?php echo $delete_url;?>'+ data +'" ><i class="fe fe-delete"></i></a>' :                 data;             }},     ],     } }