首页 文章

如何在删除行后刷新jquery数据表

提问于
浏览
5

数据表中的每一行都有一个删除按钮 .

点击删除按钮,我调用此代码:

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

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

url是控制器的动作,它接收Id并从数据库中删除数据 . 这样可行 . 我现在想要调用datatable的刷新/重绘功能,以便它可以加载新的结果,但它不起作用 .

数据表是:

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


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

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

});

有人可以请教吗?

4 回答

  • 1

    引自API datatable page - 在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
       }
    });
    
  • 3

    我能够用比上面答案中提供的更简单的方法来解决这个问题 .

    Ajax call to delete data from backend

    首先使用普通的ajax异步调用从后端删除数据 .

    Delete from frontend datatable

    获取要删除的行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);
    

    你完成.. :-)

  • 0

    这里的答案对我不起作用,所以我使用了这个:

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

    使用dataTable的实例并从datatable中删除行

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

相关问题