È possibile posizionare i pulsanti Modifica e Elimina in jQuery DataTables?

Question

io sono un principiante utilizzando jQuery DataTable, e sto cercando di mettere modificare e cancellare i pulsanti in un jQuery DataTable con l'associazione dati dinamica in bootstrap come nell'immagine qui sotto:

ma ottengo un messaggio di errore :

azione controller

public class PhoneNumber 
    { 
     public string Number { get; set; } 
     public string Description { get; set; } 
     public string Action { get; set; } 
    } 

    public ActionResult LoadPhoneNumbers() 
    { 
     var phoneNumbers = new List<PhoneNumber>(new[] 
     { 
      new PhoneNumber { Number = "555 123 4567", Description = "George",Action="" }, 
      new PhoneNumber { Number = "555 765 4321", Description = "Kevin" ,Action="" }, 
      new PhoneNumber { Number = "555 555 4781", Description = "Sam",Action="" } 
     }); 

     return Json(new 
     { 
      aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description }) 
     }, JsonRequestBehavior.AllowGet); 
    } 

HTML

<table id="tblAdminUsers" class="table table-striped table-bordered table-hover table-highlight table-checkable" 
          data-info="true" 
          data-search="true" 
          data-paginate="true"> 
          <thead> 
           <tr>          
            <th>Number</th> 
            <th>Description</th> 
            <th>Action</th> 
           </tr> 
          </thead> 
          <tbody> 
          </tbody> 
         </table> 

Script

$(function() { 

    $("#tblAdminUsers").dataTable({ 
     bProcessing: true, 
     sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")', 
     aoColumns: [ 
      { mData: "Number" }, 
      { mData: "Description" }, 
      { 
       mData: "Action", 
       bSortable: false, 
       mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; } 
      } 
     ] 
    }); 
}); 

prega di aiuto.

Answer 1

Ho appena rimuovere l'attributo mData in aoColumns proprietà

in dataTable Script.

$(function() { 

$("#tblAdminUsers").dataTable({ 
    bProcessing: true, 
    sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")', 
    aoColumns: [ 
     { bSortable: false, }, 
     { bSortable: false, }, 
     { 
      bSortable: false, 
      mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; } 
     } 
    ] 
});}); 

Answer 2

basta seguire questo URL: http://editor.datatables.net/examples/styling/envelopeInTable.html. Questo risolverà la tua preoccupazione.