如何在单击动态按钮时删除数据表中的一行？

Question

我是Datatables的新手。我不知道如何在点击一行中的按钮时获取行索引。我得到未定义的对象错误。任何人都可以指导我如何获得行索引？

下面是代码我已经试过至今：

var table = $('#subcategoryDatatable'); 
    var url = $('#url').val(); 
    var tableObj = table.DataTable({ 
     "processing": true, 
     "serverSide": false, 


     "aoColumnDefs": [ 
          { "bSearchable": true, "aTargets": [ 0 ] },       
         ], 

     ajax: 
     { 
      url: url, 
      dataSrc: 'data', 
      type: 'GET' 
     }, 

     columns: [ 
      { data: 'id'}, 
      { data: 'subcategory'}, 
      { data: 'category'}, 


    /* DELETE */ { 
      mRender: function (data, type, row) { 

      return '<a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">DELETE</a>' 

       } 
      } 

     ], 

    }); 


    $("#cancel").click(function() 
    { 
     $('#myModal').modal('hide'); 
    }); 

    $("#delete").click(function(){ 

     var target_row = $(this).closest('tr').get(0); 

     alert('Delete this id '+target_row); 

    }); 

Answer 1

var url = $('#url').val(); 
var tableObj = $('#subcategoryDatatable').DataTable({ 
    "processing": true, 
    "serverSide": false, 


    "aoColumnDefs": [ 
         { "bSearchable": true, "aTargets": [ 0 ] },       
        ], 

    ajax: 
    { 
     url: url, 
     dataSrc: 'data', 
     type: 'GET' 
    }, 

    columns: [ 
     { data: 'id'}, 
     { data: 'subcategory'}, 
     { data: 'category'}, 
     { 
      data: null, 
      orderable: false, 
      className: "dt-center", 
      defaultContent:'<a href="#" class="remove" id=del>Delete</a>' 
     } 

    ], 

}); 


$('#subcategoryDatatabletbody ').on('click', 'tr td #del', function() { 

    var row = $(this).parents('tr')[0]; 
    var mydata = (tableObj .row(row).data()); 
    alert(mydata["Id"]); 
    var con=confirm("Are you sure you want to delete this Category"+mydata["category"]); 
    if(con) 
     { 
       // Delete category Code 
     } 
     else 
     { 
     } 


}); 

确保所有这些代码应该是内部document.ready功能

Answer 2

试试这个：

mRender: function (data, type, row) { 
    return '<a href="#" id="rowid' + row.id + '" class="btn btn-danger btn-xs" data-toggle="modal" onclick="DeleteRecordModal('+ row.id +')">DELETE</a>' 
} 

和当你点击删除按钮打开一个模式：

function DeleteRecordModal(id) { 
    $("#myModal").modal("show"); 
    $("#myModal").attr("data-id",id); 
} 

，然后点击删除按钮模式

$("#delete").click(function(){ 
    var getid = $("#myModal").attr("data-id"); 
    $("#rowid" + getid).closest("tr").remove(); 

});