Как удалить строку в datatable при нажатии динамической кнопки?

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(); 

});