title: how to edit and delete from datatables with buttons on each row
body: <p>js   </p>
  
  <pre><code>    var selected = '';
      $(document).ready(function () {
  
          var oTable = $('#ApplicationsDataTable').dataTable({
              "bRetrieve": true,
              "bDestroy": true,
              "bJQueryUI": true,
              "bServerSide": true,
              "bProcessing": true,
              "bDeferRender": true,
              "bFilter": false,
              "bSort": true,
              "sRowSelect": "single",
              "sPaginationType": "full_numbers",
              "sAjaxSource": "AppsFiled/AjaxHandler",
              "rowCallback": function (row, data, displayIndex) {
                  if ($.inArray(data.DT_RowId, selected) !== -1) {
                      $(row).addClass('selected');
                  }
              },
              "aoColumns": [
                              { "mData": "Id" },
                              { "mData": "F_Name" },
                              { "mData": "L_Name" },
                              { "mData": "Email" },
                              { "mData": "Filed_Date" },
                              { "mData": "Location" },
                              {"mDataProp": null,
                              "sDefaultContent": '&lt;button id="editbutton"&gt;&lt;img src="/Content/images/edit.png" alt="edit icon" height="14" width="14"/&gt;Edit&lt;/button&gt;'
                          },
                              { "mDataProp": null,
                                  "sDefaultContent": '&lt;button id="deletebutton"&gt;&lt;img src="/Content/images/cross.png" alt="delete icon" height="16" width="16"/&gt;Delete&lt;/button&gt;'
                              }
  
                           ]
          });
  
    $("#ApplicationsDataTable tbody tr").on('click', function (event) {
                          $("#ApplicationsDataTable tbody tr").removeClass('selected');
                          $(this).addClass('selected');
                      });
  
                          $("#deletebutton").dialog({
                              resizable: false,
                              height: 140,
                              modal: true,
                              buttons: {
                                  "Delete this row": function () {
                                      $(this).dialog("close");
                                  },
                                  Cancel: function () {
                                      $(this).dialog("close");
                                  }
                              }
                          });      
      });
  </code></pre>
  
  <p>html table </p>
  
  <pre><code>&lt;table id="ApplicationsDataTable" class="display"&gt;
     &lt;thead&gt; 
          &lt;tr&gt; 
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Date Filed&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Edit&lt;/th&gt;
              &lt;th&gt;Delete&lt;/th&gt;
          &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt; 
  
    &lt;/tbody&gt;
  </code></pre>
  
  <p>wht i want to do is to get a handle on the row and have the buttons edit or delete them... with a pop-up using jquery .dialog ...I have also added the row selecting code that is not selecting the rows either...i am unable to do them for some reason... </p>