RequireJS Loader

Using RequireJS to load DataTables

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