瀏覽代碼

HUE-1778 [dbquery] Query hangs with MySql

The query hangs because the browser is busy trying to add DOM
elements for over 1000 rows. Also, datatables is trying to manage
more DOM elements than it seemingly can. Added infinite scrolling
without backend to fix this.
Abraham Elmahrek 12 年之前
父節點
當前提交
3f21246
共有 2 個文件被更改,包括 26 次插入13 次删除
  1. 24 5
      apps/rdbms/src/rdbms/templates/execute.mako
  2. 2 8
      apps/rdbms/static/js/rdbms.vm.js

+ 24 - 5
apps/rdbms/src/rdbms/templates/execute.mako

@@ -119,11 +119,6 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
               <th data-bind="text: $data"></th>
             </tr>
           </thead>
-          <tbody data-bind="foreach: rows">
-            <tr data-bind="foreach: $data">
-              <td data-bind="text: $data"></td>
-            </tr>
-          </tbody>
         </table>
       </div>
     </div>
@@ -722,6 +717,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
   var dataTable = null;
   function cleanResultsTable() {
     if (dataTable) {
+      dataTable.fnClearTable();
       dataTable.fnDestroy();
       viewModel.columns.valueHasMutated();
       viewModel.rows.valueHasMutated();
@@ -729,6 +725,16 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     }
   }
 
+  function addResults(viewModel, dataTable, index, pageSize) {
+    $.each(viewModel.rows.slice(index, index+pageSize), function(row_index, row) {
+      var ordered_row = [];
+      $.each(viewModel.columns(), function(col_index, col) {
+        ordered_row.push(row[col]);
+      });
+      dataTable.fnAddData(ordered_row);
+    });
+  }
+
   function resultsTable() {
     if (!dataTable) {
       dataTable = $(".resultTable").dataTable({
@@ -750,6 +756,19 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       $(".dataTables_filter").hide();
       $(".dataTables_wrapper").jHueTableScroller();
 
+      // Automatic results grower
+      var dataTableEl = $(".dataTables_wrapper");
+      var index = 0;
+      var pageSize = 100;
+      dataTableEl.on("scroll", function (e) {
+        if (dataTableEl.scrollTop() + dataTableEl.outerHeight() + 20 > dataTableEl[0].scrollHeight && dataTable) {
+          addResults(viewModel, dataTable, index, pageSize);
+          index += pageSize;
+        }
+      });
+      addResults(viewModel, dataTable, index, pageSize);
+      index += pageSize;
+
       $(".resultTable").width($(".resultTable").parent().width());
     }
   }

+ 2 - 8
apps/rdbms/static/js/rdbms.vm.js

@@ -79,14 +79,8 @@ function RdbmsViewModel() {
     var rows = [];
     self.columns.removeAll();  // Needed for datatables to refresh properly.
     self.columns(results.columns);
-    $.each(results.rows, function(i, result_row) {
-      var row = [];
-      $.each(self.columns(), function(j, column) {
-        row.push(result_row[column]);
-      });
-      rows.push(row);
-    });
-    self.rows(rows);
+    self.rows.removeAll();
+    self.rows(results.rows);
   };
 
   self.updateServers = function(servers) {