Can I create DataTable With Inline Action Buttons?

Question

I want to create Datatable with Inline Action buttons. How do we place action buttons inside the Table , I mean each row. Almost similar to WordPress Posts Page. I am not asking full code. Just a sample code to begin writing it. Sofar I have the following code.

jQuery("#myTableID").dataTable({
    aoColumns : [{ "sClass": "center",
 "mRender": function (data, type, row) {      
  return '<div class="input-control checkbox" /> <label><input type="checkbox" name="reference" class="job_checkbox"  value="' + row[0] + '"> <span class="check"></span></label></div>'; }  , "sWidth": "1%" },            
  { "sWidth": "20%" }, 
  { "sWidth": "30%"},
  { "sWidth": "30%"}]
});

Actually I am not good at jQuery and JS functions. Not sure how to proceed.

Answer 1

SOLUTION

You can use columns.render option to produce content for specific cell.

For example:

var table = $('#example').DataTable({
    columnDefs: [{
       targets: 0,
       render: function(data, type, full, meta){
          if(type === 'display'){
             data = data + '<div class="links">' +
                 '<a href="#">Edit</a> ' +
                 '<a href="#">Quick Edit</a> ' +
                 '<a href="#">Trash</a> ' +
                 '<a href="#">View</a>' +
                 '</div>';                     
          }

          return data;
       }
    }]
});

Using the following CSS rules you can show links only when user moves mouse over the row:

#example tr .links {
    display:none;
}

#example tr:hover .links {
    display:block;   
}

DEMO

See this jsFiddle for code and demonstration.