Как обновить jquery datatable после удаления строки

Question

Каждая строка в таблице данных имеет кнопку удаления.

При нажатии кнопки удаления я вызываю этот код:

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

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

URL-адрес - это действие контроллера, которыйпринимает идентификатор и удаляет данные из базы данных.Это работает.Теперь я хочу вызвать функцию обновления / перерисовки datatable, чтобы она могла загружать новые результаты, но она не работает.

Datatable:

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


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

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

});

Может кто-нибудь посоветовать совет?*

Answer 1

Цитируется со страницы данных API - на пуле fnReloadAjax():

Примечание. Чтобы перезагрузить данные при использовании обработки на стороне сервера, просто используйте встроенная функция API fnDraw, а не этот плагин.

Таким образом, вам лучше использовать fnDraw.

[РЕДАКТИРОВАТЬ] На самом деле порядок ваших звонков должен быть:

// 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

Мне удалось решить эту проблему гораздо проще, чем в приведенных выше ответах.

Ajax-вызов для удаления данных из серверной части

Прежде всего удалите данные из бэкэнда с помощью обычного асинхронного вызова ajax.

Удалить из внешнего интерфейса

Получите строку TR, которую вы хотите удалить, и используйте функцию данных fnDeleteRow, чтобы удалить эту строку. Это автоматически обновит таблицу, поэтому вам не понадобятся fnDraw или другие вещи.

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

И все готово ..: -)

Answer 3

Ответ здесь не работает для меня, поэтому я использовал это:

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

Добавить это в файл:

$.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 );
};

Включите файл на своей странице и позвоните так:

// 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 4

Использование экземпляра dataTable и удаление строки из таблицы данных

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