title: Is it possible to place Edit and Delete buttons in jQuery DataTables?
body: <p>I am a beginner using jQuery DataTable, and I am trying to place Edit and Delete buttons in a jQuery DataTable with dynamic databinding in bootstrap like in the below image:</p>
  
  <p><img src="https://i.stack.imgur.com/sVYSu.png" alt="enter image description here"></p>
  
  <p>But I get an error message:</p>
  
  <p><img src="https://i.stack.imgur.com/zWc6O.png" alt="enter image description here"></p>
  
  <p><strong>Controller Action</strong></p>
  
  <pre><code>    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&lt;PhoneNumber&gt;(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 =&gt; new[] { x.Number, x.Description })
          }, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;table id="tblAdminUsers" class="table table-striped table-bordered table-hover table-highlight table-checkable" 
                              data-info="true"
                              data-search="true"
                              data-paginate="true"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;                                       
                                      &lt;th&gt;Number&lt;/th&gt;
                                      &lt;th&gt;Description&lt;/th&gt;
                                      &lt;th&gt;Action&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$(function () {
  
      $("#tblAdminUsers").dataTable({
          bProcessing: true,
          sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")',
          aoColumns: [
               { mData: "Number" },
               { mData: "Description" },
               {
                   mData: "Action",
                   bSortable: false,
                   mRender: function (o) { return '&lt;i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"&gt;&lt;/i&gt;&lt;i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"&gt;&lt;/i&gt;'; }
               }
          ]
      });
  });
  </code></pre>