Обновить Jquery DataTable после удаления строки

Question

У меня есть DataTable, что отображаемые данные из таблицы (роль), и я использую вызов AJAX для удаления строки:

function OnDeleteClick(el) 
    { 
     //var url = ($(this).attr('href')); 
     //alert(url); 
     //var employeeId = event.getAttribute(id); //e.target.id 
     //var url = ($(this).attr('id'));  
     var id = $(el).attr('id');  
     var roleid = getURLParameter(id, 'id');   
     var username = getURLParameter(id, 'name');   
     var flag = confirm('You are about to delete Role ' + username + ' permanently.Are you sure you want to delete this record?'); 

     if (flag) { 
      $.ajax({ 
       url: '/Role/DeleteAJAX', 
       type: 'POST', 
       data: { roleId: roleid }, 
       dataType: 'json', 
       //success: function (result) { alert(result); $("#" + Name).parent().parent().remove(); }, 
       success: function (result) { 
        alert(result); 
       }, 
       error: function() { alert('Error!'); } 
      }); 
     } 
     return false; 
    } 

Мой вопрос заключается в том, чтобы обновить JQuery DataTable как только удаление будет успешным, удаленная строка также будет удалена из datatable?

Ниже приведен код, который я использую, чтобы построить мой JQuery DataTable:

<div class="row" > 
    <fieldset class="col-md-10 col-md-offset-1" > 
     <legend>Liste des rôles </legend> 
     <div class="table-responsive" style="overflow-x: hidden;"> 
      <table width="98%" class="table table-bordered table-hover" id="dataTables-example"> 
       <thead> 
        <tr> 
         <th>Designation Role</th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        @foreach (var item in Model) 
        { 
         <tr> 
          <td> 
           @item.Name 
          </td> 
          <td width="110">         
           <a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',false)" title="consulter"> 
            <i class="fa fa-folder-open-o"></i> 
           </a> 
           <a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',true)" title="Editer"> 
            <i class="fa fa-edit"></i> 
           </a> 
           <a class="btn btn-custom btn-xs" onclick="OnDeleteClick(this);" id="#?id=@item.Id&name=@item.Name" title=" supprimer"> 
            <i class="fa fa-trash-o"></i> 
           </a> 
          </td> 
         </tr> 
        } 
       </tbody> 
      </table> 
     </div> 
     <div class="b-right"> 
      <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create", "Role")'"> 
       <i class="fa fa-plus"></i> Ajouter un role 
      </button> 
     </div>   
    </fieldset> 
</div> 

Спасибо за вашу помощь.

Answer 1

Если вы используете DataTables.net и вы создали таблицу, как это:

var myTable = $("#myTable").DataTable({ ajax: "path/to/my/data" }); 

Вы можете обновить его, как это:

$.ajax({ 
    <your deleting code> 
    success: function() { 
     myTable.ajax.reload(); 
    }) 
});