Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large number of page views, you could potentially end up DDoSing your own server with your own applications!
This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done
by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This
intercept of the Ajax request is performed by giving the ajax option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
data from the cache can be used.
Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set, when using server-side processing, is only available at the server.
| First name | Last name | Position | Office | Start date | Salary |
|---|---|---|---|---|---|
| First name | Last name | Position | Office | Start date | Salary |
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | //// Pipelining function for DataTables. To be used to the `ajax` option of DataTables//DataTable.pipeline = function (opts) { // Configuration options var conf = Object.assign( { 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 async 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 = JSON.parse(JSON.stringify(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 (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) { Object.assign(request, d); } } else if (conf.data) { // As an object, the data given extends the default Object.assign(request, conf.data); } // Use `fetch` to make Ajax request let response = await fetch( conf.url + '?json=' + JSON.stringify(request), { method: conf.method } ); let json = await response.json(); cacheLastJson = JSON.parse(JSON.stringify(json)); if (cacheLower != drawStart) { json.data.splice(0, drawStart - cacheLower); } if (requestLength >= -1) { json.data.splice(requestLength, json.data.length); } drawCallback(json); } else { json = JSON.parse(JSON.stringify(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()`)DataTable.Api.register('clearPipeline()', function () { return this.iterator('table', function (settings) { settings.clearCache = true; });});//// DataTables initialisation//$('#example').DataTable({ ajax: DataTable.pipeline({ url: 'scripts/server_processing.php', pages: 5 // number of pages to cache }), processing: true, serverSide: true}); |
In addition to the above code, the following Javascript library files are loaded for use in this example: