JSFiddle - React, Tailwind, and code Playground

by Akshay Bhatt

HTML

<body class="dt-example">
  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Email</th>
        <th>Mobile</th>
        <th>Address</th>
      </tr>
    </thead>
  </table>

JavaScript

$.fn.dataTable.pipeline = function(opts) {

  var conf = $.extend({
    pages: 5,
    url: '',
    data: null,
    method: 'GET'
  }, opts);


  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 requestLength = request.length;
    var requestEnd = requestStart + requestLength;

    if (settings.clearCache) {

      ajax = true;
      settings.clearCache = false;
    } else if (cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper) {

      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)
    ) {

      ajax = true;
    }


    cacheLastRequest = $.extend(true, {}, request);

    if (ajax) {

      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;

      if ($.isFunction(conf.data)) {

        var d = conf.data(request);
        if (d) {
          $.extend(request, d);
        }
      } else if ($.isPlainObject(conf.data)) {

        $.extend(request, conf.data);
      }

      settings.jqXHR = $.ajax({
        "type": conf.method,
        "url": conf.url,
        "data": request,
        "dataType": "json",
        "cache": false,
        "success": function(json) {
          cacheLastJson = $.extend(true, {}, json);

          if (cacheLower != requestStart) {
            json.aaData.splice(0, requestStart - cacheLower);

          }
    ...