Change search_result_page.html to generate its table with create_datatable.js

1 files changed, 245 insertions, 338 deletions

diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index fb7f404b..0bce6793 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -131,7 +131,7 @@
             {% endif %}
           </div>
           {% endif %}
-          <div id="table_container" style="width: {% if dataset.type == 'Geno' %}375px;{% else %}100%; min-width: 1400px;{% endif %}">
+          <div id="trait_table_container" style="{% if dataset.type == 'Geno' %}width: 450px;{% else %} min-width: 1400px;{% endif %}">
             <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                 <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -163,9 +163,10 @@
 
     <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
 
     <script type='text/javascript'>
-        var trait_list = {{ trait_list|safe }};
+        var traitsJson = {{ trait_list|safe }};
     </script>
 
     <script type="text/javascript" charset="utf-8">
@@ -184,358 +185,264 @@
             {% if results|count > 0  and not too_many_results %}
             var tableId = "trait_table";
 
-            var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
+            var widthChange = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
 
             columnDefs = [
-            {
-              'data': null,
-              'width': "5px",
-              'orderDataType': "dom-checkbox",
-              'targets': 0,
-              'render': function(data, type, row, meta) {
-                return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
-              }
-            },
-            {
-              'title': "Index",
-              'type': "natural",
-              'width': "35px",
-              "searchable": false,
-              "orderable": false,
-              'targets': 1,
-              'data': "index"
-            }
-            {% if dataset.type == 'ProbeSet' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'data': null,
-              'width': "{{ max_widths.display_name * 8 }}px",
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "Symbol",
-              'type': "natural",
-              'width': "{{ max_widths.symbol * 8 }}px",
-              'targets': 3,
-              'data': "symbol"
-            },
-            {
-              'title': "Description",
-              'type': "natural",
-              'data': null,
-              'targets': 4,
-              'render': function(data, type, row, meta) {
-                try {
-                  return decodeURIComponent(escape(data.description))
-                } catch(err){
-                  return escape(data.description)
+              {
+                'data': null,
+                'width': "5px",
+                'orderDataType': "dom-checkbox",
+                'targets': 0,
+                'render': function(data, type, row, meta) {
+                  return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
                 }
+              },
+              {
+                'title': "Index",
+                'type': "natural",
+                'width': "35px",
+                "searchable": false,
+                "orderable": false,
+                'targets': 1,
+                'data': "index"
               }
-            },
-            {
-              'title': "<div style='text-align: right;'>Location</div>",
-              'type': "natural-minus-na",
-              'width': "130px",
-              'targets': 5,
-              'data': "location"
-            },
-            {
-              'title': "<div style='text-align: right;'>Mean</div>",
-              'type': "natural-minus-na",
-              'width': "40px",
-              'data': "mean",
-              'targets': 6,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "lod_score",
-              'width': "60px",
-              'targets': 7,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right;'>Peak Location</div>",
-              'type': "natural-minus-na",
-              'width': "130px",
-              'targets': 8,
-              'data': "lrs_location"
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "additive",
-              'width': "65px",
-              'targets': 9,
-              'orderSequence': [ "desc", "asc"]
-            }{% elif dataset.type == 'Publish' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'width': "{{ max_widths.display_name * 9 }}px",
-              'data': null,
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "Description",
-              'type': "natural",
-              {% if (max_widths.description * 7) < 500 %}
-              'width': "{{ max_widths.description * 7 }}px",
-              {% else %}
-              'width': "500px",
-              {% endif %}
-              'data': null,
-              'targets': 3,
-              'render': function(data, type, row, meta) {
-                try {
+              {% if dataset.type == 'ProbeSet' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'data': null,
+                'width': "{{ max_widths.display_name * 8 }}px",
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+                }
+              },
+              {
+                'title': "Symbol",
+                'type': "natural",
+                'width': "{{ max_widths.symbol * 8 }}px",
+                'targets': 3,
+                'data': "symbol"
+              },
+              {
+                'title': "Description",
+                'type': "natural",
+                'data': null,
+                'targets': 4,
+                'render': function(data, type, row, meta) {
+                  try {
                     return decodeURIComponent(escape(data.description))
-                } catch(err){
-                    return data.description
+                  } catch(err){
+                    return escape(data.description)
+                  }
                 }
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Mean</div>",
-              'type': "natural-minus-na",
-              'width': "60px",
-              'data': "mean",
-              'targets': 4,
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "Authors",
-              'type': "natural",
-              {% if (max_widths.authors * 5) < 500 %}
-              'width': "{{ max_widths.authors * 5 }}px",
-              {% else %}
-              'width': "500px",
-              {% endif %}
-              'data': null,
-              'targets': 5,
-              'render': function(data, type, row, meta) {
-                author_list = data.authors.split(",")
-                if (author_list.length >= 2) {
-                  author_string = author_list.slice(0, 2).join(",") + ", et al."
-                } else{
-                  author_string = data.authors
+              },
+              {
+                'title': "<div style='text-align: right;'>Location</div>",
+                'type': "natural-minus-na",
+                'width': "130px",
+                'targets': 5,
+                'data': "location"
+              },
+              {
+                'title': "<div style='text-align: right;'>Mean</div>",
+                'type': "natural-minus-na",
+                'width': "40px",
+                'data': "mean",
+                'targets': 6,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "lod_score",
+                'width': "60px",
+                'targets': 7,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right;'>Peak Location</div>",
+                'type': "natural-minus-na",
+                'width': "130px",
+                'targets': 8,
+                'data': "lrs_location"
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "additive",
+                'width': "65px",
+                'targets': 9,
+                'orderSequence': [ "desc", "asc"]
+              }{% elif dataset.type == 'Publish' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'width': "{{ max_widths.display_name * 9 }}px",
+                'data': null,
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
-                return author_string
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Year</div>",
-              'type': "natural-minus-na",
-              'data': null,
-              'width': "50px",
-              'targets': 6,
-              'render': function(data, type, row, meta) {
-                if (data.pubmed_id != "N/A"){
-                  return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
-                } else {
-                  return data.pubmed_text
+              },
+              {
+                'title': "Description",
+                'type': "natural",
+                {% if (max_widths.description * 7) < 500 %}
+                'width': "{{ max_widths.description * 7 }}px",
+                {% else %}
+                'width': "500px",
+                {% endif %}
+                'data': null,
+                'targets': 3,
+                'render': function(data, type, row, meta) {
+                  try {
+                      return decodeURIComponent(escape(data.description))
+                  } catch(err){
+                      return data.description
+                  }
                 }
               },
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'data': "lod_score",
-              'targets': 7,
-              'width': "60px",
-              'orderSequence': [ "desc", "asc"]
-            },
-            {
-              'title': "<div style='text-align: right;'>Peak Location</div>",
-              'type': "natural-minus-na",
-              'width': "125px",
-              'targets': 8,
-              'data': "lrs_location"
-            },
-            {
-              'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
-              'type': "natural-minus-na",
-              'width': "60px",
-              'data': "additive",
-              'targets': 9,
-              'orderSequence': [ "desc", "asc"]
-            }{% elif dataset.type == 'Geno' %},
-            {
-              'title': "Record",
-              'type': "natural-minus-na",
-              'width': "{{ max_widths.display_name * 9 }}px",
-              'data': null,
-              'targets': 2,
-              'render': function(data, type, row, meta) {
-                return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
-              }
-            },
-            {
-              'title': "<div style='text-align: right;'>Location</div>",
-              'type': "natural-minus-na",
-              'width': "125px",
-              'targets': 2,
-              'data': "location"
-            }{% endif %}
-            ];
-
-            loadDataTable(true);
-
-            function loadDataTable(first_run=false){
-
-              if (!first_run){
-                setUserColumnsDefWidths(tableId, columnDefs);
-              }
-
-              //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
-              table_settings = {
-                'drawCallback': function( settings ) {
-                      $('#' + tableId + ' tr').off().on("click", function(event) {
-                        if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
-                          var obj =$(this).find('input');
-                          obj.prop('checked', !obj.is(':checked'));
-                        }
-                        if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
-                          $(this).removeClass("selected")
-                        } else if (event.target.tagName.toLowerCase() !== 'a') {
-                          $(this).addClass("selected")
-                        }
-                        change_buttons()
-                      });
-                },
-                'createdRow': function ( row, data, index ) {
-                    $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
-                    $('td', row).eq(1).attr("align", "right");
-                    $('td', row).eq(1).attr('data-export', index+1);
-                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
-                    {% if dataset.type == 'ProbeSet' %}
-                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    if ($('td', row).eq(3).text().length > 20) {
-                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
-                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
-                    }
-                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
-                    if ($('td', row).eq(4).text().length > 500) {
-                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 500));
-                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
-                    }
-                    $('td', row).slice(5,10).attr("align", "right");
-                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
-                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
-                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
-                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
-                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
-                    {% elif dataset.type == 'Publish' %}
-                    $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    if ($('td', row).eq(3).text().length > 500) {
-                        $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 500));
-                        $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
-                    }
-                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
-                    $('td', row).eq(4).attr('align', 'right');
-                    $('td', row).slice(6,10).attr("align", "right");
-                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
-                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
-                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
-                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
-                    $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
-                    {% elif dataset.type == 'Geno' %}
-                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
-                    {% endif %}
-                },
-                "data": trait_list,
-                "columns": columnDefs,
-                "order": [[1, "asc" ]],
-                "sDom": "iti",
-                "destroy": true,
-                "autoWidth": false,
-                "bSortClasses": false,
-                "scrollY": "1000px",
-                "scrollCollapse": true,
-                {% if trait_list|length > 10 %}
-                "scroller":  true,
+              {
+                'title': "<div style='text-align: right;'>Mean</div>",
+                'type': "natural-minus-na",
+                'width': "60px",
+                'data': "mean",
+                'targets': 4,
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "Authors",
+                'type': "natural",
+                {% if (max_widths.authors * 5) < 500 %}
+                'width': "{{ max_widths.authors * 5 }}px",
+                {% else %}
+                'width': "500px",
                 {% endif %}
-                "iDisplayLength": -1,
-                "initComplete": function (settings) {
-                  //Add JQueryUI resizable functionality to each th in the ScrollHead table
-                  $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
-                    handles: "e",
-                    alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
-                    resize: function( event, ui ) {
-                      width_change = ui.size.width - ui.originalSize.width;
-                    },
-                    stop: function () {
-                      saveColumnSettings(tableId, trait_table);
-                      loadDataTable();
-                    }
-                  });
+                'data': null,
+                'targets': 5,
+                'render': function(data, type, row, meta) {
+                  author_list = data.authors.split(",")
+                  if (author_list.length >= 2) {
+                    author_string = author_list.slice(0, 2).join(",") + ", et al."
+                  } else{
+                    author_string = data.authors
+                  }
+                  return author_string
                 }
-              }
-
-              if (!first_run){
-                $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "px"); //ZS : Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
-
-                let checked_rows = getCheckedRows(tableId);
-                trait_table = $('#' + tableId).DataTable(table_settings);
-                if (checked_rows.length > 0){
-                  recheck_rows(trait_table, checked_rows);
+              },
+              {
+                'title': "<div style='text-align: right;'>Year</div>",
+                'type': "natural-minus-na",
+                'data': null,
+                'width': "50px",
+                'targets': 6,
+                'render': function(data, type, row, meta) {
+                  if (data.pubmed_id != "N/A"){
+                    return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+                  } else {
+                    return data.pubmed_text
+                  }
+                },
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>LOD <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'data': "lod_score",
+                'targets': 7,
+                'width': "60px",
+                'orderSequence': [ "desc", "asc"]
+              },
+              {
+                'title': "<div style='text-align: right;'>Peak Location</div>",
+                'type': "natural-minus-na",
+                'width': "125px",
+                'targets': 8,
+                'data': "lrs_location"
+              },
+              {
+                'title': "<div style='text-align: right; padding-right: 10px;'>Effect</div> <div style='text-align: right;'>Size <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup style='color: #FF0000;'><i>?</i></sup></a></div>",
+                'type': "natural-minus-na",
+                'width': "60px",
+                'data': "additive",
+                'targets': 9,
+                'orderSequence': [ "desc", "asc"]
+              }{% elif dataset.type == 'Geno' %},
+              {
+                'title': "Record",
+                'type': "natural-minus-na",
+                'width': "{{ max_widths.display_name * 9 }}px",
+                'data': null,
+                'targets': 2,
+                'render': function(data, type, row, meta) {
+                  return '<a target="_blank" href="/show_trait?trait_id=' + data.display_name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
                 }
-              } else {
-                trait_table = $('#' + tableId).DataTable(table_settings);
-                trait_table.draw();
-              }
+              },
+              {
+                'title': "<div style='text-align: right;'>Location</div>",
+                'type': "natural-minus-na",
+                'width': "125px",
+                'targets': 2,
+                'data': "location"
+              }{% endif %}
+            ];
 
-              if (first_run){
-                {% if trait_list|length > 20 %}
-                $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
-                {% else %}
-                $('#table_container').css("width", String($('#trait_table').width()) + "px");
+            tableSettings = {
+              "createdRow": function ( row, data, index ) {
+                $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+                $('td', row).eq(1).attr("align", "right");
+                $('td', row).eq(1).attr('data-export', index+1);
+                $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+                {% if dataset.type == 'ProbeSet' %}
+                $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                if ($('td', row).eq(3).text().length > 20) {
+                  $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
+                  $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
+                }
+                $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                if ($('td', row).eq(4).text().length > 500) {
+                  $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 500));
+                  $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
+                }
+                $('td', row).slice(5,10).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+                {% elif dataset.type == 'Publish' %}
+                $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+                if ($('td', row).eq(3).text().length > 500) {
+                  $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 500));
+                  $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
+                }
+                $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+                $('td', row).eq(4).attr('align', 'right');
+                $('td', row).slice(6,10).attr("align", "right");
+                $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+                $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+                $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+                $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+                $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
+                {% elif dataset.type == 'Geno' %}
+                $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
                 {% endif %}
-              }
+              },
+              "order": [[1, "asc" ]],
+              {% if traits_json|length > 10 %}
+              "scrollY": "1000px",
+              "scroller": true
+              {% else %}
+              "scroller": false
+              {% endif %}
             }
 
-            trait_table.on( 'order.dt search.dt', function () {
-              trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
-                cell.innerHTML = i+1;
-              } );
-            } ).draw();
-
-            window.addEventListener('resize', function(){
-              trait_table.columns.adjust();
-            });
-
-            $('.toggle-vis').on( 'click', function (e) {
-              e.preventDefault();
-
-              // Get the column API object
-              var column = trait_table.column( $(this).attr('data-column') );
-
-              // Toggle the visibility
-              column.visible( ! column.visible() );
-
-              if (column.visible()){
-                $(this).removeClass("active");
-              } else {
-                $(this).addClass("active");
-              }
-            } );
-
-            $('#redraw').click(function() {
-                var table = $('#' + tableId).DataTable();
-                table.colReorder.reset()
-            });
+            create_table(tableId, traitsJson, columnDefs, tableSettings)
             {% endif %}
 
             submit_special = function(url) {