Data Tables Test

by therm81

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>EBITDA Dashboard Dev</title>
    <base target="_parent">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"/>

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
  </head>

  <body class="iFrameClass">

    <div>
      <table id="detailTable" width="100%">
        <thead>
          <tr>
            <th>a</th>
            <th>b
              <th>
          </tr>
        </thead>
      </table>
    </div>
  </body>

</html>

JavaScript

/*
requirejs.config({
  paths: {
    jquery: "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min",
    "datatables.net": "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min"
  }
});
requirejs(["jquery", "datatables.net"], function(DBIDs, Papa) {
*/
 	$(document).ready(function() {
    var dtable = $('#detailTable').DataTable({
      ajax: function(data, callback, settings) {
        var d = {
          data: [{
            a: 1,
            b: 2
          }, {
            a: 3,
            b: 4
          }]
        }
        callback(d);
      },
      orderCellsTop: true,
      orderFixed: {
        pre: [0, 'asc'],
        post: [1, 'asc']
      },
      rowGroup: {
        dataSrc: 'a',
        startRender: null,
        endRender: function(rows, group) {
          return $("<tr/>").append("<td colspan='11' style='background-color: black;'></td>");
        }
      },
      responsive: false,
      columns: [{
          data: "a"
        },
        {
          data: "b"
        }
      ],
      paging: false,
      info: false,
      searching: true,
      dom: 'Bfrtip',
      buttons: ['excel']
    });
  });
//});