diff --git a/app/assets/javascripts/samples/sample_datatable.js b/app/assets/javascripts/samples/sample_datatable.js
index 9e27d3d8f..88b186842 100644
--- a/app/assets/javascripts/samples/sample_datatable.js
+++ b/app/assets/javascripts/samples/sample_datatable.js
@@ -26,7 +26,8 @@ function dataTableInit() {
     processing: true,
     serverSide: true,
     colReorder: {
-      fixedColumnsLeft: 2
+      fixedColumnsLeft: 2,
+      realtime: false
     },
     destroy: true,
     ajax: {
@@ -89,55 +90,54 @@ function dataTableInit() {
     },
     preDrawCallback: function() {
       animateSpinner(this);
-      $(".sample_info").off("click");
+      $('.sample_info').off('click');
     },
-    stateLoadCallback: function (settings) {
+    stateLoadCallback: function(settings) {
       // Send an Ajax request to the server to get the data. Note that
       // this is a synchronous request since the data is expected back from the
       // function
-      var org = $("#samples").attr("data-organization-id")
-      var user = $("#samples").attr("data-user-id")
+      var org = $('#samples').attr('data-organization-id');
+      var user = $('#samples').attr('data-user-id');
 
-      $.ajax( {
-        url: '/state_load/'+org+'/'+user,
+      $.ajax({
+        url: '/state_load/' + org + '/' + user,
         data: {org: org},
         async: false,
-        dataType: "json",
-        type: "POST",
-        success: function (json) {
+        dataType: 'json',
+        type: 'POST',
+        success: function(json) {
           myData = json.state;
         }
-      } );
-      return myData
+      });
+      return myData;
     },
-    stateSaveCallback: function (settings, data) {
+    stateSaveCallback: function(settings, data) {
       // Send an Ajax request to the server with the state object
-      var org = $("#samples").attr("data-organization-id")
-      var user = $("#samples").attr("data-user-id")
-
+      var org = $('#samples').attr('data-organization-id');
+      var user = $('#samples').attr('data-user-id');
       // Save correct data
       if (loadFirstTime == true) {
         data = myData;
       }
 
-      $.ajax( {
-        url: '/state_save/'+org+'/'+user,
+      $.ajax({
+        url: '/state_save/' + org + '/' + user,
         data: {org: org, state: data},
-        dataType: "json",
-        type: "POST"
-      } );
+        dataType: 'json',
+        type: 'POST'
+      });
       loadFirstTime = false;
     },
     fnInitComplete: function(oSettings, json) {
       // Reload correct column order and visibility (if you refresh page)
-      oSettings._colReorder.fnOrder(myData.ColReorder);
       for (var i = 0; i < table.columns()[0].length; i++) {
         var visibility = myData.columns[i].visible;
-        if (typeof(visibility) === "string"){
-            var visibility = (visibility === "true");
+        if (typeof (visibility) === 'string') {
+          visibility = (visibility === 'true');
         }
         table.column(i).visible(visibility);
       }
+      oSettings._colReorder.fnOrder(myData.ColReorder);
     }
   });
 
@@ -813,6 +813,7 @@ function changeToEditMode() {
   table.button(0).enable(false);
 }
 
+// Samples table columns dropdown handling code
 (function(table) {
   'use strict';
 
@@ -852,7 +853,6 @@ function changeToEditMode() {
             data.name + '</th>');
           var colOrder = table.colReorder.order();
           colOrder.push(colOrder.length);
-          table.colReorder.reset();
           // Remove all event handlers as we re-initialize them later with
           // new table
           $('#samples').off();
@@ -863,8 +863,9 @@ function changeToEditMode() {
           $('div.toolbarButtons').appendTo('div.samples-table');
           $('div.toolbarButtons').hide();
           table = dataTableInit();
-          table.colReorder.order(colOrder, true);
-          loadColumnsNames();
+          table.on('init.dt', function() {
+            loadColumnsNames();
+          });
         },
         url: url
       });
@@ -986,9 +987,11 @@ function changeToEditMode() {
   function initDropdown() {
     table.on('init.dt', function() {
       initNewColumnForm();
-      loadColumnsNames();
       initSorting();
     });
+    $('#samples-columns-dropdown').on('show.bs.dropdown', function() {
+      loadColumnsNames();
+    });
   }
 
   initDropdown();
diff --git a/app/models/samples_table.rb b/app/models/samples_table.rb
index 5d4f92fde..40ce10181 100644
--- a/app/models/samples_table.rb
+++ b/app/models/samples_table.rb
@@ -14,7 +14,7 @@ class SamplesTable < ActiveRecord::Base
     index = org_status['columns'].count
     org_status['columns'][index] = SampleDatatable::
                                    SAMPLES_TABLE_DEFAULT_STATE['columns'].first
-    org_status['ColReorder'] << index
+    org_status['ColReorder'] << index.to_s
     samples_table.first.update(status: org_status)
   end