#2836 dataTables improvement: adding search/filtering

twosigma · Jan 20, 2016 · 53870ec · 53870ec
1 parent 66544da
commit 53870ec
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/core/src/main/web/app/styles/datatables.scss b/core/src/main/web/app/styles/datatables.scss
@@ -38,6 +38,22 @@ td.dtcenter {
   border-color: $border-color;
 }
 
+.dataTables_wrapper .dataTables_filter {
+  float:      left;
+  text-align: left;
+  margin-top: 10px;
+  display:    none;
+
+  .fa.fa-times {
+    cursor:       pointer;
+    padding-left: 5px;
+    color:        #999999;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
 div.dtmenu {
   float: right;
   color: #73BE3B;

diff --git a/core/src/main/web/outputdisplay/bko-tabledisplay/bko-tabledisplay.js b/core/src/main/web/outputdisplay/bko-tabledisplay/bko-tabledisplay.js
@@ -298,15 +298,15 @@
               }
               var out = $scope.exportTo(data, 'tabs');
               return out;
-            }
+            };
             var executeCopy = function (text) {
               var input = document.createElement('textarea');
               document.body.appendChild(input);
               input.value = text;
               input.select();
               document.execCommand('Copy');
               input.remove();
-            }
+            };
             var data = getTableData();
             executeCopy(data);
           }
@@ -376,7 +376,7 @@
           }
         };
 
-        $scope.renderMenu     = false;
+        $scope.renderMenu = false;
 
         var chr = {
           '"': '&quot;', '&': '&amp;', '\'': '&#39;',
@@ -667,8 +667,13 @@
           $scope.modal.close();
           $scope.refreshCells();
         };
+
+        $scope.showSearch = function() {
+          var sField = $('.dataTables_filter');
+          sField.toggleClass('show');
+        };
       },
-      link: function(scope, element, attrs) {
+      link: function(scope) {
 
         scope.doDestroy = function(all) {
           if (scope.table) {
@@ -934,8 +939,9 @@
               }
             }
             cols.push({'title' : scope.indexName+'&nbsp;&nbsp;', 'className': 'dtright', 'render': converter});
-          } else
-            cols.push({'title' : '    ', 'className': 'dtright', 'render': converter});
+          } else {
+            cols.push({'title': '    ', 'className': 'dtright', 'render': converter});
+          }
 
           for (i = 0; i < scope.columnNames.length; i++) {
             var type = scope.actualtype[i];
@@ -969,7 +975,7 @@
             'autoWidth': true,
             'order': [[0, 'asc']],
             'scrollX': '10%',
-            'searching': false,
+            'searching': true,
             'deferRender': true,
             'language': {
               'emptyTable': 'empty table'
@@ -986,9 +992,9 @@
             init.paging = false;
             init.scrollY = scope.pagination.rowsToDisplay * 27 + 2;
             init.scrollCollapse = true;
-            init.dom = '<"bko-table"rt>';
+            init.dom = '<"bko-table"rtf>';
           } else {
-            init.dom = '<"bko-table"rt<"bko-table-bottom"<"bko-table-selector"l><"bko-table-pagenum"p>>S>';
+            init.dom = '<"bko-table"rt<"bko-table-bottom"<"bko-table-selector"l><"bko-table-pagenum"p>>Sf>';
             if (scope.data.length > 25) {
               init.pagingType = 'simple_numbers';
               init.pageLength = 25;
@@ -1024,6 +1030,14 @@
             new $.fn.dataTable.KeyTable($(id));
             scope.refreshCells();
 
+            var sField = $('.dataTables_filter');
+            $('<i/>', {class: 'fa fa-times'})
+              .bind('click', function(e) {
+                scope.showSearch();
+                e.stopPropagation();
+              })
+              .appendTo(sField);
+
             /*
             $(id + ' tbody').off('click');
             */

diff --git a/core/src/main/web/outputdisplay/bko-tabledisplay/output-table.jst.html b/core/src/main/web/outputdisplay/bko-tabledisplay/output-table.jst.html
@@ -27,6 +27,7 @@
      <li><a tabindex="-1" href="#" ng-click="doCSVExport(true)" id="dt-save-selected" eat-click>Save Selected as CSV</a></li>
      <li>&nbsp;</li>
      <li><a tabindex="-1" href="#" ng-click="openOptionsDialog()" id="dt-options" eat-click>Options...</a></li>
+     <li><a tabindex="-1" href="#" ng-click="showSearch()" id="dt-search" eat-click>Search...</a></li>
    </ul>
  </div>