Question

我有一张10到1000行的表格我有一个文本字段来过滤表。我使用此代码根据过滤器过滤每行的显示：

const

如果我有10行或20行，它可以正常工作，但是当我在每个字母之间有1000行时间时，它太长了。有时长达5秒。

也许有办法让它更有效率。

有关信息，分页不是一种选择，出于某些客户原因，我不能有多个页面。

非常感谢你的帮助

Answer 1

从缓存$(this)开始。创建$(this)对象需要时间，因此请创建一个并对其进行缓存：let $this = $(this)，然后重用$this。

$(".cs_line")和$("#cs_name").val().toLowerCase()也是如此。这些操作中的每一个都需要jQuery来访问DOM并创建完整的jQuery对象，并且你已经做了数千次。

另外，限制你的键盘，每次按下键都不要执行过滤器。

优化代码：

const $lines = $(".cs_line")
const name = $("#cs_name").val().toLowerCase()
let typeTimeout = null

const applyFilter = () => {
    $lines.each(() => {
        let $this = $(this);
        if ($this.data('name').toLowerCase().includes(name)) {
            $this.show("fast"); // Or just .show(), much faster
        } else {
            $this.hide("fast"); // Or just .hide(), much faster
        }
    });
}

const throttleFilter = () => {
    clearTimeout(typeTimeout);
    typeTimeout = setTimeout(applyfilter, 400) // Will apply the filter if no key is pressed for 400ms
}

$("#cs_name").keyup(throttleFilter);

Answer 2

这是我根据数据属性过滤数据的方式，因此可以快速运行。

/* Just filling table with data */
var trs = $(Array.from({length: 1000}, () => Math.floor(Math.random() * 1000)).map( n => `<tr data-name="${n}"><td>${n}</td></tr>`).join(""))

var tbody = $("#tbod").append(trs)
/* end of filling table */

var lastFilter = "", //holds last typed search
    rows = tbody.find("tr");  // table rows
      
/* Normalize the data to start so you are not doing it on every check */
rows.attr("data-name", function (index, value) {
 return value.toLowerCase()
})

$("#filter").on("keyup", function () {
    var currentFilter = this.value.toLowerCase();  //get what was typed and normalize it
    //If the last filter does not match current than we need to reset table rows
    if (!lastFilter || currentFilter.substring(0,currentFilter.length-1) !== lastFilter) {
        rows.removeClass("hidden");
    }
    //store what the filter was for next iteration
    lastFilter = currentFilter;

    //If there is text, filter it
    if (currentFilter) {    
      //Use CSS selector to find it ^ is start, use * for anywhere
      trs.not('tr[data-name^="' + currentFilter + '"]').addClass("hidden")
    }
});

.hidden { display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="filter" />
<table>
  <tbody id="tbod">
  </tbody>
</table>

Answer 3

我认为更好的选择是使用Jquery Datatable。它提供了对多列和其他即用功能的快速搜索。

<强>更新：不使用JQuery Datatable，您可以提高存储cs_line元素的性能，而不是每次使用查询选择器检索。

文字过滤非常慢

3 个答案: