Define the table and then do the_table.draw() to fix issue where column headers sometimes aren't aligned with rows + change width of checkbox column

1 files changed, 4 insertions, 2 deletions

diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 5f1465d7..89316cbc 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -107,7 +107,7 @@
                 }
             }
 
-            $('#trait_table').DataTable( {
+            var the_table = $('#trait_table').DataTable( {
                 'drawCallback': function( settings ) {
                      $('#trait_table tr').click(function(event) {
                          if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
@@ -147,7 +147,7 @@
                     {
                       'data': null,
                       'orderDataType': "dom-checkbox",
-                      'width': "25px",
+                      'width': "10px",
                       'render': function(data, type, row, meta) {
                         return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                       }
@@ -281,6 +281,8 @@
                 '</tr>' +
               '</tfoot>'
             );
+
+            the_table.draw();
         });
         
     </script>