javascript - 手动加载更新datatable数据，无需调用ajax

Question

我试图通过使用 .ajax.params() 获取最后一组 ajax 参数并从第一次调用返回表数据来避免进行两次 ajax 调用。

然后，我按照此模式将自己的 json 传递到数据表

datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();

从这里question .

但是我的表设置了 ajax，因此当调用 draw() 时，会触发另一个 ajax 调用，这会破坏我自己传递数据的意义。我需要的是一种在重绘表格时抑制 ajax 调用的方法。

另一种方法是编写我自己的 ajax 处理并手动将数据添加到数据表中，如上所述，但是我认为我还必须自己创建 ajax 参数，这将是一个痛苦。

Answer 1

我创建了以下数据表插件，可以使用自定义 ajax 设置进行一次 ajax 加载。

var __reload = function ( settings, holdPosition, callback ) {
    // Use the draw event to trigger a callback
    if ( callback ) {
        var api = new _Api( settings );

        api.one( 'draw', function () {
            callback( api.ajax.json() );
        } );
    }

    if ( settings.oApi._fnDataSource( settings ) == 'ssp' ) {
        settings.oApi._fnReDraw( settings, holdPosition );
    }
    else {
        settings.oApi._fnProcessingDisplay( settings, true );

        // Cancel an existing request
        var xhr = settings.jqXHR;
        if ( xhr && xhr.readyState !== 4 ) {
            xhr.abort();
        }

        // Trigger xhr
        settings.oApi._fnBuildAjax( settings, [], function( json ) {
            settings.oApi._fnClearTable( settings );

            var data = settings.oApi._fnAjaxDataSrc( settings, json );
            for ( var i=0, ien=data.length ; i<ien ; i++ ) {
                settings.oApi._fnAddData( settings, data[i] );
            }

            settings.oApi._fnReDraw( settings, holdPosition );
            settings.oApi._fnProcessingDisplay( settings, false );
        } );
    }
};

jQuery.fn.dataTable.Api.register( 'ajax.loadOnce()', function ( ajax, callback, resetPaging ) {
    return this.iterator( 'table', function ( ctx ) {
        store = ctx.ajax;
        ctx.ajax = ajax;
        __reload( ctx, resetPaging===false, callback );
        ctx.ajax = store;
    } );
} );

这使得将数据表参数与自定义数据和新 URL 结合起来

ajax = {
    url: url,
    data: function (d){                    
        d.value = value;
    }
};

table.ajax.loadOnce(ajax);