Pipelining data to reduce Ajax calls for pagination is not displaying the table data for the second call

I am trying to implement dataTable.pipeline. On page load, the data is properly displaying in the table but on clicking(searching, next, no of entries) it is fetching the json data but not displaying it. It is happening only from the second call to the server. It just displays: Processing...

My code looks like this:

<div class="table-responsive">
    <div class="row">
        <div class="col-sm-12 manage-stl">
            <table id="example" class="display zero-configuration" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>FIRST NAME</th>
                        <th>LAST NAME</th>
                        <th>ADDED ON</th>
                        <th>PHONE NUMBER</th>
                        <th>EMAIL ID</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>#</th>
                        <th>FIRST NAME</th>
                        <th>LAST NAME</th>
                        <th>ADDED ON</th>
                        <th>PHONE NUMBER</th>
                        <th>EMAIL ID</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
        //
    // Pipelining function for DataTables. To be used to the `ajax` option of DataTables
    //
    $.fn.dataTable.pipeline = function ( opts ) {
        // Configuration options
        var conf = $.extend( {
            pages: 5,     // 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: 'GET' // Ajax HTTP method
        }, opts );
     
        // Private variables for storing the cache
        var cacheLower = -1;
        var cacheUpper = null;
        var cacheLastRequest = null;
        var cacheLastJson = null;
     
        return function ( request, drawCallback, settings ) {
            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
                ajax = true;
                settings.clearCache = false;
            }
            else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
                // outside cached data - need to make a request
                ajax = true;
            }
            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)
                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;
                request._token = "{{ csrf_token() }}";
     
                // Provide the same `data` options as DataTables.
                if ( typeof conf.data === 'function' ) {
                    // 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
                    var d = conf.data( request );
                    if ( d ) {
                        $.extend( request, d );
                    }
                }
                else if ( $.isPlainObject( conf.data ) ) {
                    // As an object, the data given extends the default
                    $.extend( request, conf.data );
                }
     
                return $.ajax( {
                    "type":     conf.method,
                    "url":      conf.url,
                    "data":     request,
                    "dataType": "json",
                    "cache":    false,
                    "success":  function ( json ) {
                        console.log(json);
                        cacheLastJson = $.extend(true, {}, json);
                        console.log("drawStart:"+drawStart);
                        if ( cacheLower != drawStart ) {
                            console.log("first");
                            json.data.splice( 0, drawStart-cacheLower );
                        }
                        if ( requestLength >= -1 ) {
                            console.log("second");
                            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;
        } );
    } );
     
     
    //
    // DataTables initialisation
    //
    $(document).ready(function() {
        $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            // "order": [],
            "ajax": $.fn.dataTable.pipeline( {
                url: "{{route('admin.client.getAjaxDatatableList')}}",
                pages: 2 // number of pages to cache
            } )
        } );
    } );
</script>

I have also include these 3:

https://code.jquery.com/jquery-3.5.1.js

https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

Please help me out with this.