Creating dynamic datatable using pipeline datasource

abhishekhotte

Hi Team,

I have a requirement to create datatable dynamically based datasource(adding column info & data), in the below example I have declared only html table tag and I need the append columns & data dynamically based on the json response.

 <table id="datatable"></table>

$('#datatable').DataTable({ 
                    "ajax": $.fn.dataTable.pipeline( {
                        url: "iview_enh.aspx/GetiViewData",
                        pages: 5 // number of pages to cache
                    }),
                   "bProcessing": true,
                    "bServerSide": true,
                  });

 $.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.iVName = self.iName
                    // 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);
                    }
                    data = '{iVName: "' + self.iName + '", recsPerPage: "' + request.length + '", pageno: "' + request.start + '"}'
                    settings.jqXHR = $.ajax({
                        "type": "POST",
                        "url": conf.url,
                        "data": data,
                        "dataType": "json",
                        "contentType": "application/json; charset=utf-8",
                        "cache": false,
                        "success": function (response) {
                            json = parseiViewData(response)
                            cacheLastJson = $.extend(true, {}, json);

                            if (cacheLower != drawStart) {
                                json.data.splice(0, drawStart - cacheLower);
                            }
                            drawCallback(json);
                        },
                        "error": function (data) {
                            debugger
                        }
                    });
                }
                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;
            });
        });

In the above example I was unable to add datatable column def & datasource it is showing below warning message

DataTables warning: table id=datatable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

How can I append columns & data to datatable using Pipelining Ajax data source, In the above example I'm getting response in json format which contains json.columns[..] and json.data[..].

Regards,
Abhishek