enhance pivot table element to be well formed for potential use with …

…DataTables plugin
nicolaskruchten · Aug 12, 2015 · b84f4e7 · b84f4e7
1 parent 06e6236
commit b84f4e7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 29 deletions.
diff --git a/dist/pivot.js b/dist/pivot.js
@@ -735,7 +735,7 @@
     Default Renderer for hierarchical table layout
      */
     pivotTableRenderer = function(pivotData, opts) {
-      var aggregator, c, colAttrs, colKey, colKeys, defaults, i, j, r, result, rowAttrs, rowKey, rowKeys, spanSize, td, th, totalAggregator, tr, txt, val, x;
+      var aggregator, c, colAttrs, colKey, colKeys, defaults, i, j, r, result, rowAttrs, rowKey, rowKeys, spanSize, thead, tbody, td, th, totalAggregator, tr, txt, val, x;
       defaults = {
         localeStrings: {
           totals: "Totals"
@@ -748,6 +748,8 @@
       colKeys = pivotData.getColKeys();
       result = document.createElement("table");
       result.className = "pvtTable";
+      thead = document.createElement("thead");
+      tbody = document.createElement("tbody");
       spanSize = function(arr, i, j) {
         var l, len, n, noDraw, ref, ref1, stop, x;
         if (i !== 0) {
@@ -812,7 +814,7 @@
           th.setAttribute("rowspan", colAttrs.length + (rowAttrs.length === 0 ? 0 : 1));
           tr.appendChild(th);
         }
-        result.appendChild(tr);
+        thead.appendChild(tr);
       }
       if (rowAttrs.length !== 0) {
         tr = document.createElement("tr");
@@ -830,26 +832,38 @@
           th.innerHTML = opts.localeStrings.totals;
         }
         tr.appendChild(th);
-        result.appendChild(tr);
+        thead.appendChild(tr);
       }
       for (i in rowKeys) {
         if (!hasProp.call(rowKeys, i)) continue;
         rowKey = rowKeys[i];
         tr = document.createElement("tr");
         for (j in rowKey) {
-          if (!hasProp.call(rowKey, j)) continue;
-          txt = rowKey[j];
-          x = spanSize(rowKeys, parseInt(i), parseInt(j));
-          if (x !== -1) {
-            th = document.createElement("th");
-            th.className = "pvtRowLabel";
-            th.innerHTML = txt;
-            th.setAttribute("rowspan", x);
-            if (parseInt(j) === rowAttrs.length - 1 && colAttrs.length !== 0) {
-              th.setAttribute("colspan", 2);
+            if (opts.datatablesEnabled === true ){
+                if (!hasProp.call(rowKey, j)) continue;
+                txt = rowKey[j];
+                th = document.createElement("th");
+                th.className = "pvtRowLabel";
+                th.innerHTML = txt;
+                tr.appendChild(th);
+                if (parseInt(j) === rowAttrs.length - 1 && colAttrs.length !== 0) {
+                    tr.appendChild(document.createElement("th"));
+                }
+            } else {
+              if (!hasProp.call(rowKey, j)) continue;
+              txt = rowKey[j];
+              x = spanSize(rowKeys, parseInt(i), parseInt(j));
+              if (x !== -1) {
+                th = document.createElement("th");
+                th.className = "pvtRowLabel";
+                th.innerHTML = txt;
+                th.setAttribute("rowspan", x);
+                if (parseInt(j) === rowAttrs.length - 1 && colAttrs.length !== 0) {
+                  th.setAttribute("colspan", 2);
+                }
+                tr.appendChild(th);
+              }
             }
-            tr.appendChild(th);
-          }
         }
         for (j in colKeys) {
           if (!hasProp.call(colKeys, j)) continue;
@@ -870,7 +884,7 @@
         td.setAttribute("data-value", val);
         td.setAttribute("data-for", "row" + i);
         tr.appendChild(td);
-        result.appendChild(tr);
+        tbody.appendChild(tr);
       }
       tr = document.createElement("tr");
       th = document.createElement("th");
@@ -897,6 +911,8 @@
       td.innerHTML = totalAggregator.format(val);
       td.setAttribute("data-value", val);
       tr.appendChild(td);
+      result.appendChild(thead);
+      result.appendChild(tbody);
       result.appendChild(tr);
       result.setAttribute("data-numrows", rowKeys.length);
       result.setAttribute("data-numcols", colKeys.length);
@@ -921,6 +937,7 @@
         derivedAttributes: {},
         renderer: pivotTableRenderer,
         rendererOptions: null,
+        datatablesEnabled: false,
         localeStrings: locales.en.localeStrings
       };
       opts = $.extend(defaults, opts);
@@ -1504,6 +1521,4 @@
     };
   });
 
-}).call(this);
-
-//# sourceMappingURL=pivot.js.map
+}).call(this);
diff --git a/pivot.coffee b/pivot.coffee
@@ -390,6 +390,8 @@ callWithJQuery ($) ->
         #now actually build the output
         result = document.createElement("table")
         result.className = "pvtTable"
+        thead = document.createElement("thead");
+        tbody = document.createElement("tbody");
 
         #helper function for setting row/col-span in pivotTableRenderer
         spanSize = (arr, i, j) ->
@@ -458,15 +460,23 @@ callWithJQuery ($) ->
         for own i, rowKey of rowKeys
             tr = document.createElement("tr")
             for own j, txt of rowKey
-                x = spanSize(rowKeys, parseInt(i), parseInt(j))
-                if x != -1
-                    th = document.createElement("th")
-                    th.className = "pvtRowLabel"
+                if opts.datatablesEnabled == true
+                    th = document.createElement('th')
+                    th.className = 'pvtRowLabel'
                     th.innerHTML = txt
-                    th.setAttribute("rowspan", x)
-                    if parseInt(j) == rowAttrs.length-1 and colAttrs.length !=0
-                        th.setAttribute("colspan",2)
                     tr.appendChild th
+                    if parseInt(j) == rowAttrs.length-1 and colAttrs.length !=0
+                        tr.appendChild document.createElement('th')
+                        else
+                            x = spanSize(rowKeys, parseInt(i), parseInt(j))
+                            if x != -1
+                                th = document.createElement("th")
+                                th.className = "pvtRowLabel"
+                                th.innerHTML = txt
+                                th.setAttribute("rowspan", x)
+                                if parseInt(j) == rowAttrs.length-1 and colAttrs.length !=0
+                                    th.setAttribute("colspan",2)
+                                    tr.appendChild th
             for own j, colKey of colKeys #this is the tight loop
                 aggregator = pivotData.getAggregator(rowKey, colKey)
                 val = aggregator.value()
@@ -504,11 +514,13 @@ callWithJQuery ($) ->
             tr.appendChild td
         totalAggregator = pivotData.getAggregator([], [])
         val = totalAggregator.value()
-        td = document.createElement("td")
-        td.className = "pvtGrandTotal"
+        td = document.createElement('td')
+        td.className = 'pvtGrandTotal'
         td.innerHTML = totalAggregator.format(val)
         td.setAttribute("data-value", val)
         tr.appendChild td
+        result.appendChild thead
+        result.appendChild tbody
         result.appendChild tr
 
         #squirrel this away for later
@@ -532,7 +544,8 @@ callWithJQuery ($) ->
             sorters: -> 
             derivedAttributes: {},
             renderer: pivotTableRenderer
-            rendererOptions: null
+            rendererOptions: null,
+            datatablesEnabled: false,
             localeStrings: locales.en.localeStrings
 
         opts = $.extend defaults, opts