Làm thế nào để làm mới jquery datatable sau khi xóa một hàng

Question

Mỗi hàng trong bảng dữ liệu có một nút xóa.

On click nút delete, tôi kêu gọi mã này:

$('.deleteButton').live('click', function() { 

      var $this = $(this); 
      var url = $this.attr("id"); 
      $("#example").fnReloadAjax(); 
      $.getJSON(url, Success()); 
     }); 

Url là hành động của bộ điều khiển mà mất Id và xóa dữ liệu từ cơ sở dữ liệu. Điều đó hoạt động. Bây giờ tôi muốn gọi hàm refresh/redraw của datatable để nó có thể tải kết quả mới nhưng nó không hoạt động.

DataTable là:

$("#example").dataTable({ 
      "aoColumns": [ 
        { "sTitle": "Id" }, 
         { "sTitle": "Name" }], 


      "bProcessing": true, 
      "bServerSide": true, 

      "sAjaxSource": '@Url.Action("FetchData", "Home")', 
      "sPaginationType": "full_numbers", 

}); 

bất cứ ai có thể vui lòng tư vấn?

Answer 1

Phần trích dẫn từ API datatable page - trên fnReloadAjax() đạn:

Lưu ý: Để tải lại dữ liệu khi sử dụng chế biến server-side, chỉ cần sử dụng tích hợp chức năng API fnDraw hơn là plug-in này.

Vì vậy, bạn nên sử dụng tốt hơn fnDraw.

[EDIT] Trên thực tế, thứ tự của các cuộc gọi của bạn nên là:

// you don't have to use $.json because you don't use the downloaded data 
// first, ask the server to delete the data 
$.ajax({ 
    url: urlToDelete, 
    success: function() { 
     // if it worked, ask datatable to redraw the table with the new data 
     $("#example").dataTable().fnDraw(); 
     // if this js function does anything useful (like deleting the row), then call it: 
     Success(); 
    }, 
    error: function() { 
     // display any error (like server couldn't be reached...), or at least try to log it 
    } 
}); 

Answer 2

Câu trả lời ở đây không làm việc cho tôi, vì vậy tôi sử dụng này:

http://datatables.net/plug-ins/api#fnReloadAjax

Thêm này vào một tệp:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
{ 
    if (sNewSource !== undefined && sNewSource !== null) { 
     oSettings.sAjaxSource = sNewSource; 
    } 

    // Server-side processing should just call fnDraw 
    if (oSettings.oFeatures.bServerSide) { 
     this.fnDraw(); 
     return; 
    } 

    this.oApi._fnProcessingDisplay(oSettings, true); 
    var that = this; 
    var iStart = oSettings._iDisplayStart; 
    var aData = []; 

    this.oApi._fnServerParams(oSettings, aData); 

    oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) { 
     /* Clear the old information from the table */ 
     that.oApi._fnClearTable(oSettings); 

     /* Got the data - add it to the table */ 
     var aData = (oSettings.sAjaxDataProp !== "") ? 
      that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

     for (var i=0 ; i<aData.length ; i++) 
     { 
      that.oApi._fnAddData(oSettings, aData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 

     that.fnDraw(); 

     if (bStandingRedraw === true) 
     { 
      oSettings._iDisplayStart = iStart; 
      that.oApi._fnCalculateEnd(oSettings); 
      that.fnDraw(false); 
     } 

     that.oApi._fnProcessingDisplay(oSettings, false); 

     /* Callback user function - for event handlers etc */ 
     if (typeof fnCallback == 'function' && fnCallback !== null) 
     { 
      fnCallback(oSettings); 
     } 
    }, oSettings); 
}; 

Bao gồm tệp trên trang của bạn và gọi như này:

// Example call to load a new file 
oTable.fnReloadAjax('media/examples_support/json_source2.txt'); 

// Example call to reload from original file 
oTable.fnReloadAjax(); 

Answer 3

Tôi có thể giải quyết vấn đề này với nhiều cách tiếp cận đơn giản hơn các câu trả lời ở trên.

Ajax cuộc gọi để xóa dữ liệu từ backend

Trước hết xóa dữ liệu từ backend sử dụng bình thường gọi ajax async.

Xóa từ frontend DataTable

Lấy TR hàng mà bạn muốn xóa và sử dụng chức năng DataTable fnDeleteRow xóa hàng này. Điều này sẽ tự động làm mới bảng, do đó bạn sẽ không cần bất kỳ fnDraw hoặc các nội dung khác.

//in my case its delete button which was clicked 
//so I got its parents parent which is TR row 
var row = $(this).parent().parent(); 


$('DATA TABLE SELECTOR').dataTable().fnDeleteRow(row); 

Và bạn đã làm xong .. :-)

Answer 4

Sử dụng thể hiện của DataTable và loại bỏ hàng từ DataTable

dataTable.fnDeleteRow($(that).closest('tr').remove()); 
dataTable.fnDraw();