Performance issues with basic Ajax-sourced DataTable

arobthearab

I have a roughly 330 row x 20 column data table over which I laid some fairly complex logic to provide something akin to Editor functionality.

Loading this table took 8-9 seconds, which I attributed to my poor JS coding. However, in the process of optimizing and cleaning up my kludge [sic], I found that the table with just a basic Ajax load and no custom code takes around 6-7 seconds to load--after the COMPLETION of the Ajax call. I would expect 6,000-7,000 cells to load more or less instantly without my cruft on top of it.

Here is my table initialization code:

    var _COLUMNS = 
    [
        { data: "c1" , orderable: true } , 
        { data: "c2" , orderable: true } , 
               .
               .
               .
        { data : "c20" , orderable: true } 
    ];
    
    var _TABLE = $("#table").DataTable({
        ajax : tableLoader ,
        columns: _COLUMNS ,
        pageLength : 10 , 
        lengthMenu : [[10, 20, -1], [10, 25, "All"]] ,
        srollX : true ,
        autoWidth: false 
    });

Here is the "tableLoader" code:

function tableLoader ( data , callback , settings )
{
    $.ajax({
        method: "post" ,
        url: "source.cgi" ,
        data: {} ,
        timeout: 20000 ,
        success: loadSuccess ,
        error : loadError 
    });
    
    function loadError ( request , status , exception )
    {
        console.log("tableLoader AJAX error", request, status, thrown);
            
        alert("Attempt to access database failed with " + status + ", see JavaScript console for details");
    }

    function loadSuccess ( results , outcome , request )
    {   
        var rows;
        
        if (!identityCheck(results))
        {
            rows = [];  
        }
        else
        {
            rows = results.nodes;
        }

        callback({ "data" : rows });
    }
    
    function identityCheck ( results )
    {
        var answer = false;
        var identity = results.identity;
        
        if (identity.failed)
        {
            answer = identityError(identity);
        }
        else
        {
            answer = identitySet(identity);
        }
        
        return answer;
    }
    
    function identitySet ( identity )
    {
        $("#user").text(identity.user);
        $("#user").data("role", identity.role);
        
        return true;
    }
    
    function identityError ( identity )
    {
        console.log("tableLoader authentication error", identity);
        
        alert("Authentication error for user [" + identity.user + "] with role [" + identity.role + "]");
        
        return false;
    }
}