Searching and sorting doesn't work

kasperjustcarpets

Hello,

Im using datatables with server side loading via pipelining but I want searching + sorting to work. This does nothing unfortunately.
I get correct json back from the server which is loaded when I open the page with the table but when I want to use the sorting or searching functions it loads for a little second but does not update the table.

    var table = $('#table_id').DataTable({
        serverSide: true,
        "processing": true,
        "language": {
            processing: '<svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /></svg>'
        },
        stateSave: true,
        responsive: true,
        dom: 'Bfrtip',
        lengthMenu: [
            [ 5, 10, 15 ],
            [ '10 rows', '25 rows', '50 rows' ]
        ],
        buttons: [
            { 
                extend: 'pageLength'
            },
            {
                text: 'Selecteer velden', extend: 'colvis'
            }
        ],
        ajax: $.fn.dataTable.pipeline( {
            url: "{{route('pagination1')}}",
            dataSrc : "data"
        }),
        "columns": [
            { "data": "ItemCode"},
            { "data": "Created" },
            { "data": "Description"},
            { "data": "PlannedQuantity"},
            { "data": "PlannedDate"},
            { "data": "Materiaal"},
        ]
    }); 

The pipeline code:

$.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;

        // console.log(request);
        // if (request.search['value'] == "") {
        //     if (request.order[0]) {
        //         var table = $('#table_id').DataTable();
        //         table
        //             .order( [[ 1, 'asc' ]] )
        //             .draw( );
        //         console.log(request.order[0]['column']);
        //         console.log(request.order[0]['dir']);
        //     }
        // }

        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;

            // Provide the same `data` options as DataTables.
            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
                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);
            }

            settings.jqXHR = $.ajax({
                "type": conf.method,
                "url": conf.url,
                "data": request,
                "dataType": "json",
                "cache": false,
                "success": function success(json) {
                    cacheLastJson = $.extend(true, {}, json);
                    var data = json['data'];
                    
                    for (var i = 0, leng = data.length; i < leng; i++) {
                        var material = data[i].ShopOrderMaterialPlans['results'];

                        for (var x = 0, len = material.length; x < len; x++) {
                            // console.log(material.length + " " + x);
                            if (getMaterial(material[x]['ItemCode'], 'TAP')) {
                                data[i]['Materiaal'] = material[x]['ItemCode'];
                            }
                        }
                    }

                    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);
            var data = json['data'];

            for (var i = 0, leng = data.length; i < leng; i++) {
                var material = data[i].ShopOrderMaterialPlans['results'];

                for (var x = 0, len = material.length; x < len; x++) {
                    // console.log(material.length + " " + x);
                    if (getMaterial(material[x]['ItemCode'], 'TAP')) {
                        data[i]['Materiaal'] = material[x]['ItemCode'];
                    }
                }
            }

            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;
    });
});

function getMaterial(data, search) {
    if (data && search) {
        if (data.substr(0, 3) === search) {
            return true;
        } else {
            return false;
        }
    }
}

allan

serverSide: true,

So the search and sort is to be handled by your server-side processing script. Does it accept the data that DataTables sends?

Allan