DataTable Pipeline Failed to load resource: the server responded with a status of 400 (Bad Request)

vipultripathi

Please find below the jquery functions that I have customized for my requirement ,

$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options

var conf = $.extend( {
    pages:10,
    //pages: 10,     // number of pages to cache
    url: '',      // script url
    data: null,   // function or object with parameters to send to the server
                  // matching how `ajax.data` works in DataTables
    method: 'POST' // Ajax HTTP method

}, opts );

console.log(conf.data);

// Private variables for storing the cache
var cacheLower = -1;
var cacheUpper = null;
var cacheLastRequest = null;
var cacheLastJson = null;

return function ( request, drawCallback, settings ) {

    console.log(request);
    var ajax          = false;
    var requestStart  = request.start;
    var drawStart     = request.start;
    var requestLength = request.length;
    var requestEnd    = requestStart + requestLength;

    if ( settings.clearCache ) {
        // API requested that the cache be cleared
        alert("ajax true first");
        ajax = true;
        settings.clearCache = false;
    }
    else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
        // outside cached data - need to make a request
        ajax = true;
        alert("ajax true seccond");
    }
    else if ( JSON.stringify( request.order )   !== JSON.stringify( cacheLastRequest.order ) ||
              JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
              JSON.stringify( request.search )  !== JSON.stringify( cacheLastRequest.search )
    ) {
        // properties changed (ordering, columns, searching)
        alert("ajax true third");
        ajax = true;
    }

    // Store the request for checking next time around
    cacheLastRequest = $.extend( true, {}, request );

    if ( ajax ) {
        // Need data from the server
        if ( requestStart < cacheLower ) {
            requestStart = requestStart - (requestLength*(conf.pages-1));

            if ( requestStart < 0 ) {
                requestStart = 0;
            }
        }

        cacheLower = requestStart;
        cacheUpper = requestStart + (requestLength * conf.pages);

        request.start = requestStart;
        request.length = requestLength*conf.pages;

        // Provide the same `data` options as DataTables.

        console.log(conf.data);
        if ( $.isFunction ( conf.data ) ) {
            // As a function it is executed with the data object as an arg
            // for manipulation. If an object is returned, it is used as the
            // data object to submit
            alert("first condition");
            var d = conf.data( request );
            if ( d ) {
                $.extend( request, d );
            }
        }
        else if ( $.isPlainObject( conf.data ) ) {
            alert("second condition");
            // As an object, the data given extends the default
            $.extend( request, conf.data );
        }

                settings.jqXHR = $.ajax( {
                    "type":     conf.method,
                    "url":      conf.url+'?'+$.param(request),
                    "data":     JSON.stringify(conf.data),
                    "processData": false,
                     "contentType" : "application/json", 
                    /* "dataType": "json", */
                    "cache":    false,
                    "success":  function ( json ) {

                cacheLastJson = $.extend(true, {}, json);

                if ( cacheLower != drawStart ) {
                    json.data.splice( 0, drawStart-cacheLower );
                }
                if ( requestLength >= -1 ) {
                    json.data.splice( requestLength, json.data.length );
                }

                drawCallback( json );
            }
        } );
    }
    else {
        json = $.extend( true, {}, cacheLastJson );
        json.draw = request.draw; // Update the echo for each response
        json.data.splice( 0, requestStart-cacheLower );
        json.data.splice( requestLength, json.data.length );

        drawCallback(json);
    }
}

};

// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. table.clearPipeline().draw())
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );

javascript code for DataTable Initialization ,

str='{"tableName":"table_name","fromDate":"'+frmDateDrillDown+'","toDate":"'+toDateDrillDown+'","draw":"0","start":"0"}';

$('#popupGridTableRaw').DataTable( {
"processing": true,
"serverSide": true,
"bLengthChange": false,
"pageLength": 100,
"searching": false,
"ordering": false,
columns : [ {
"data" : "arafImsi"
},
{
"data" : "arafMsisdn"
},
{
"data" : "arafIccid"
},
{
"data" : "arafSubStatus"
},
{
"data" : "arafSubStsRsnCd"
},
{
"data" : "arafSubType"
},
{
"data" : "arafMarket"
},
{
"data" : "arafSubmkt"
},
{
"data" : "arafFilterInd"
},
{
"data" : "arafDuplicateInd"
},
{
"data" : "arafTimestamp"
},

    ], 
    "ajax": $.fn.dataTable.pipeline( {

         type:"POST", 
        url:"${hostConfig.applicationUrl}/rawDataBucket",
        data:str,

         dataType: "json",
        async: true,
        crossDomain: true,  
        pages: 10 // number of pages to cache
    } )
} );

Kindly help me in resolving this issue. Thanks in advance.

allan

If its a 400 error, it suggests that the server is rejecting the request from the client. You'd need to look at the server log to see what it thinks the error is.

Allan

vipultripathi

Thanks Allan for your response.