如何编辑和数据表的按钮上的每一行删除

Question

JS

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": '<button id="editbutton"><img src="/Content/images/edit.png" alt="edit icon" height="14" width="14"/>Edit</button>' 
         }, 
          { "mDataProp": null, 
           "sDefaultContent": '<button id="deletebutton"><img src="/Content/images/cross.png" alt="delete icon" height="16" width="16"/>Delete</button>' 
          } 

         ] 
     }); 

    $("#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"); 
           } 
          } 
         });  
    }); 

HTML表格

<table id="ApplicationsDataTable" class="display"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email</th> 
      <th>Date Filed</th> 
      <th>Location</th> 
      <th>Edit</th> 
      <th>Delete</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 

西隧我想要做的是让该行手柄和具有按钮编辑或删除它们...用弹出使用jquery .dialog ...我还添加了行选择代码，不选择行...我无法做到这些由于某种原因...

Answer 1

我不得不实施类似的事情。我不喜欢以下内容：

---

首先，diffrently定义你的按钮，像这样：

"aoColumns": [ 
      { "mData": "Id" }, 
      ... 
      {"mDataProp": null, 
      "sDefaultContent": '<button id="editbutton" onclick="myfunction(this)"><img src="/Content/images/edit.png" alt="edit icon" height="14" width="14"/>Edit</button>' 
      }, 
      { "mDataProp": null, 
         "sDefaultContent": '<button id="deletebutton" onclick="myotherfunction(this)"><img src="/Content/images/cross.png" alt="delete icon" height="16" width="16"/>Delete</button>' 
      } 
] 

通过传递（这）在你的onclick mehod，你就可以得到DATAS不同行。

---

现在你可以让你的DATAS是这样的：

function myfunction(el) { 
    var row = $(el).parent().parent().parent(); // Get the row 
    var id = oTable.fnGetData(row.get(0))[1]; // Get the cell 
    row.remove(); // deletes the row 
}