手动加载更新数据表数据而不调用ajax

Posted 2023-05-07

【中文标题】手动加载更新数据表数据而不调用ajax

【英文标题】：Manually load update datatable data without calling ajax

【发布时间】：2016-12-01 14:53:34

【问题描述】：

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

然后我按照这种模式将我自己的 json 传递给数据表

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

来自这个question。

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

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

【问题讨论】：

为什么你想要一个 ajax 源表，然后手动将行加载到其中？为什么不坚持一种方法？

当某些事件发生时，我会调用 ajax 来更新服务器端的数据，有时这些会改变表后面的数据。目前，当这个 ajax 调用返回时，它会告诉数据表重绘，但是这使用了另一个我想避免的 ajax 调用。

也许我做错了，而不是从另一个 ajax 调用加载数据，我可以使用 table.ajax.url 更改 datatables 调用并使用 ajax.data 添加额外的参数（不确定初始化后如何设置）。那么问题就变成了如何根据返回的json取消重绘。

我的建议是坚持基础而不是过于复杂的事情。如果您需要编写自定义 ajax 处理等，您可能以错误的方式看待问题。

所以我已经用我的第二种方法让它工作了，但是它相当hacky，因为我在初始化时设置了ajax.data，然后测试看看我是否真的在尝试进行更复杂的数据调用.将看看ajax.url 是如何工作的，看看我是否可以为ajax.data 写类似的东西。

【参考方案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);

【参考方案2】：

我遇到了类似的问题。我发现的最简单的解决方法是暂时禁用 AJAX 和服务器端处理，进行更改，然后重置如下所示的值：

function set_datatable_ajax_processing(table, bool) 
table.settings()[0].oFeatures.bServerSide = bool;
table.settings()[0].ajax = bool;


set_datatable_ajax_processing(table, false)
// table edits and/or draw done here ...      
set_datatable_ajax_processing(table, true)