Demo

I am using this solution to load dynamic data in to Data Table. I have to use the Array of Array since I am getting dynamic data from user on font end selection (NO DATABASE Selection). I am using following code to upload data into the table

1. <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"></table>

1. $(document).ready(function () {
2.               var counter = 0;
3.               var compareTable = [];
4.               var compareRow = [];
5.               var check = "Test";
6.               var compModelName = "Test";
7.               var selectedType = "Test";
8.               var selectedTarget = "Test";
9.               var selectedROR = "Test";
10.               var selectedSpecies = "Test";
11.               var historicDis = "Test";
12.               var projectsNumber = "Test";
13.               var projectsCost = "Test";
14.               var projectsRoads = "Test";
15.               var projectsPowerline = "Test";
16.               var projectsPenstock = "Test";
17.               var mapshow = "Test";
18. 
    
19.               $("#load").on("click", function () {
20.                   loader();
21.               });
22. 
    
23.               function loader() {
24.                   compareRow.push(check);
25.                   compareRow.push(compModelName);
26.                   compareRow.push(selectedType);
27.                   compareRow.push(selectedTarget);
28.                   compareRow.push(selectedROR);
29.                   compareRow.push(selectedSpecies);
30.                   compareRow.push(historicDis);
31.                   compareRow.push(projectsNumber);
32.                   compareRow.push(projectsCost);
33.                   compareRow.push(projectsRoads);
34.                   compareRow.push(projectsPowerline);
35.                   compareRow.push(projectsPenstock);
36.                   compareRow.push(mapshow);
37.               }
38. 
    
39.               $('#example').dataTable( {
40.                   "data": compareTable,
41.                   "columns": [
42.                       { "title": "Compare" },
43.                        { "title": "Model Name" },
44.                       { "title": "Model Type" },
45.                       { "title": "Energy Target" },
46.                       { "title": "ROR Attribute" },
47.                       { "title": "Species", "class": "center" },
48.                       { "title": "Disturbance", "class": "center" },
49.                       { "title": "Projects" },
50.                       { "title": "Cost (M$)" },
51.                       { "title": "Roads (Km)" },
52.                       { "title": "Powerlines (Km)", "class": "center" },
53.                       { "title": "Penstock (m)", "class": "center" },
54.                       { "title": "Map" }
55.                    ]
56.               } );   
57.               });
58. });

but as you can see in the Demo it is not functioning when we click on the  "#load" . Can you please let me know why this is happening and how I can fix it?