configure columns, hide empty columns + destroy because of slow hiding

js/control/TrackMessages.js

@@ -1,27 +1,44 @@
 BR.TrackMessages = L.Class.extend({
+
+    columnOptions: {
+        'Longitude': { visible: false },
+        'Latitude': { visible: false },
+        'Elevation': { title: 'elev.', className: 'dt-body-right' },
+        'Distance': { title: 'dist.', className: 'dt-body-right' },
+        'CostPerKm': { title: 'cost/km', className: 'dt-body-right' },
+        'ElevCost': { title: 'elevcost', className: 'dt-body-right' },
+        'TurnCost': { title: 'turncost', className: 'dt-body-right' }
+    },
+
     initialize: function () {
+        var table = document.getElementById('datatable');
+        this.tableClassName = table.className;
+        this.tableParent = table.parentElement;
     },
 
     update: function (polyline, segments) {
         var i,
             messages,
             data = [],
-            columns;
+            columns,
-
+            headings,
-        if (!segments || segments.length === 0)
+            table;
-           return;
 
         for (i = 0; segments && i < segments.length; i++) {
             messages = segments[i].feature.properties.messages;
-
-            if (i === 0) {
-                columns = this._getColumns(messages[0]);
-            }
-
             data = data.concat(messages.slice(1));
         }
 
-        $('#datatable').DataTable({
+        this._destroyTable();
+
+        if (data.length === 0)
+           return;
+
+        headings = messages[0];
+        columns = this._getColumns(headings, data);
+
+        console.time('datatable');
+        table = $('#datatable').DataTable({
             destroy: true,
             data: data,
             columns: columns,
@@ -34,17 +51,58 @@ BR.TrackMessages = L.Class.extend({
             order: []
         });
 
+        console.timeEnd('datatable');
     },
-            
+
-    _getColumns: function(headings) {
+    _destroyTable: function() {
-        var columns = [];
+        var ele;
+
+        if ($.fn.DataTable.isDataTable('#datatable') ) {
+            // destroy option too slow on update, really remove elements with destroy method
+            $('#datatable').DataTable().destroy(true);
+
+            // recreate original table element, destroy removes all
+            ele = document.createElement('table');
+            ele.id = 'datatable';
+            ele.className = this.tableClassName;
+            this.tableParent.appendChild(ele);
+        }
+
+        return ele || document.getElementById('datatable');
+    },
+
+    _getColumns: function(headings, data) {
+        var columns = [],
+            defaultOptions,
+            options,
+            emptyColumns = this._getEmptyColumns(data);
+
         for (k = 0; k < headings.length; k++) {
-            // http://datatables.net/reference/option/#Columns
+            defaultOptions = {
-            columns.push({
+                title: headings[k],
-                title: headings[k]
+                visible: !emptyColumns[k]
-            });
+            };
+            options = L.extend(defaultOptions, this.columnOptions[headings[k]]);
+            columns.push(options);
         }
         return columns;
+    },
+
+    _getEmptyColumns: function(data) {
+        var empty = new Array(data[0].length),
+            i;
+    
+        for (i = 0; i < empty.length; i++) {
+            empty[i] = true;
+        }
+
+        data.forEach(function(row) {
+            row.forEach(function(val, i) {
+                empty[i] = empty[i] && !val;
+            });
+        });
+
+        return empty;
     }
 });