如何使用纯Javascript过滤非常大的引导表

Question

我在引导程序中构建了一个大表，大约5,000行x 10列，我需要仅使用JavaScript来快速过滤表中的特定属性。该表同时具有id列和属性列，即

id | attr | ...
---------------
2  |  X   | ...
3  |  Y   | ...
4  |  X   | ...

为了使过滤过程更快，我建立了一个哈希表，将属性映射回列ID。例如，我有一个映射：

getRowIds["X"] = [2,4]

用户可以在搜索框中输入属性“ X”，然后哈希表查找包含“ X”的对应行（在这种情况下为2和4，然后通过map操作调用以下函数：] >

this.hideRow = function(id) {
    document.getElementById(id).style.display="none"
}

this.showRow = function(id) {
    document.getElementById(id).style.display=""
}
此过程仍然很慢，因为允许用户选择多个属性（例如X，Y）。

是否有更快的隐藏行的方法？

如果我能以某种方式将表与DOM分离，进行更改然后重新附加，会更快吗？如何在javascript中执行此操作？

还有其他更有效/更智能的过滤方法吗？

谢谢：）

我在引导程序中构建了一个大表，大约5,000行x 10列，我需要仅使用JavaScript来快速过滤表中的特定属性。该表同时具有id列和一个...

Answer 1

使用AngularJS确实是个好主意，这样我们就可以使您的行变得简单]

Answer 2

我会问

Answer 3

您最好的选择是不渲染所有这些东西并存储它们的对象版本，并且通过分页一次最多只能显示50行。在JS中将那么多对象存储在内存中是没有问题的。另一方面，将所有这些存储在DOM中会使浏览器屈服。 5000处于浏览器可以在良好机器上执行的同时保持良好性能的上限。如果您开始修改其中一些行并进行调整（“隐藏”，“显示”），则肯定会变得更慢。

Answer 4

我提出了一个您可能想签出的过滤解决方案。

Answer 5

请参阅

<h3>Add Filter</h3>
Column:
<select id="filterColumn">
  <option value="1">attr</option>
  <option value="0">id</option>
</select>
Action:
<select id="filterType">
  <option value="0">filter out</option>
  <option value="1">filter out everything but</option>
</select>
Value(s):
<input id="addFilterValue" type="button" value="+"
><input id="removeFilterValue" type="button" value="-"
><input name="filterValue" type="text" placeholder="value">
<br>
<input id="addFilter"  type="button" value="Apply">
<hr>
<table id="hugeTable">
  <col><col>
  <thead>
    <tr><th colspan="2"><h3>Huge Table</h3></th></tr>
    <tr><th>id</th><th>attr</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="filters">
  <h3>Filters</h3>
</div>

链接可能会有所帮助，唯一的问题是它不在纯JavaScript中，它也使用angularjs。

this

Answer 6

这里是一个动态过滤器解决方案，它使用

    app.service("NameService", function($http, $filter){

  function filterData(data, filter){
    return $filter('filter')(data, filter)
  }

  function orderData(data, params){
    return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
  }

  function sliceData(data, params){
    return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
  }

  function transformData(data,filter,params){
    return sliceData( orderData( filterData(data,filter), params ), params);
  }

  var service = {
    cachedData:[],
    getData:function($defer, params, filter){
      if(service.cachedData.length>0){
        console.log("using cached data")
        var filteredData = filterData(service.cachedData,filter);
        var transformedData = sliceData(orderData(filteredData,params),params);
        params.total(filteredData.length)
        $defer.resolve(transformedData);
      }
      else{
        console.log("fetching data")
        $http.get("data.json").success(function(resp)
        {
          angular.copy(resp,service.cachedData)
          params.total(resp.length)
          var filteredData = $filter('filter')(resp, filter);
          var transformedData = transformData(resp,filter,params)

          $defer.resolve(transformedData);
        });  
      }

    }
  };
  return service;  
});

事件在输入框中键入的字母来过滤表。

Answer 7

除了进行搜索之外，渲染还要花很多时间和资源。限制要显示的行数，您的代码可以像超级按钮一样工作。此外，如果只打印有限的行，则与其隐藏和取消隐藏，不如将其隐藏起来。您可以在我的开源库

function SearchRecordsInTable(searchBoxId, tableId) {
    var searchText = document.getElementById(searchBoxId).value;
    searchText = searchText.toLowerCase();
    var targetTable = document.getElementById(tableId);
    var targetTableColCount;

    //Loop through table rows
    for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
        var rowData = '';

        //Get column count from header row
        if (rowIndex == 0) {
            targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
            continue; //do not execute further code for header row.
        }

        //Process data rows. (rowIndex >= 1)
        for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
            rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
            rowData = rowData.toLowerCase();
        }
        console.log(rowData);

        //If search term is not found in row data
        //then hide the row, else show
        if (rowData.indexOf(searchText) == -1)


            targetTable.rows.item(rowIndex).style.display = 'none';
        else
            targetTable.rows.item(rowIndex).style.display = '';
    }
}

]中查看其操作方式