Lọc danh sách lớn ở phía máy khách

Question

Tôi đang cố Lọc một danh sách lớn dữ liệu bảng với khóa văn bản.

Trong quá khứ tôi đã làm việc với danh sách nhỏ hơn nhiều và sử dụng giải pháp như

sau

http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

và

http://papermashup.com/jquery-list-filtering/

Với những bạn lặp qua danh sách với nội dung của bộ lọc của bạn và bạn chuyển đổi các màn hình riêng lẻ dựa trên việc hiển thị hay không.

tôi đang cố gắng để đạt được lọc này mà không cần sử dụng bất kỳ plugin bổ sung (trừ bất cứ điều gì mà đi kèm với jquery)

Tôi cũng đang cố gắng để giữ tất cả các tính năng lọc trên các mặt hàng.

Dưới đây là đánh dấu của tôi

<div> 
    <table> 
    <tbody> 
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr>   
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WKDD-FM"> 
      <td> WKDD-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WNIR-FM"> 
      <td> WNIR-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
    <tbody> 
    <table> 
</div> 

tôi lọc ra các nội dung dữ liệu mã. Ngoài ra kích thước của danh sách của tôi là khoảng 2.000 mục (tr).

CẬP NHẬT: Tôi đã nhận được phiếu bỏ phiếu vì vậy hãy để tôi làm rõ. Tôi không tìm kiếm số lượng lớn mã. Tôi chỉ cần một số suy nghĩ nếu có một cách tốt hơn để kiến ​​trúc sư bộ lọc này khác thì cách tôi đang làm nó.

Answer 1

tôi sẽ chia sẻ những hiểu biết tôi nhặt dọc đường

1) tránh dom thao tác

Đây là một quy tắc bạn sẽ nghe thấy thường xuyên và nó nhẫn đúng trong ví dụ này là tốt. Bạn có thể lấy đi thao tác các dom trong trường hợp nhỏ, nhưng nó được tốn kém một cách nhanh chóng và thậm chí đắt hơn nếu bạn không có html bằng văn bản tốt như bạn sẽ phải phân tích cú pháp và các yếu tố html để thử và xác định vị trí và thao tác chính xác là bạn muốn.

2) Nếu bạn quyết định điều khiển mái vòm hoạt động hiệu quả.

Sau khi sử dụng jquery trong một thời gian, bạn sẽ nhận ra rằng có những cách mà công việc jquery đang đánh thuế trên hệ thống của bạn.

Dưới đây là một ví dụ về những gì tôi đang nói: http://jsperf.com/jquery-children-vs-findall

Nếu bạn đang chạy vào các vấn đề với tốc độ chắc chắn rằng bạn đang sử dụng jquery trong một cách mà là như hiệu quả càng tốt Solution

:

Tạo danh sách có bao gồm mục bộ lọc.

Tôi có thể giữ mọi thứ ở phía khách hàng như tôi đã hình dung ban đầu. Tôi đã tạo ra html động thông qua js vì vậy tôi đã có các cơ chế tại chỗ để xây dựng danh sách của tôi. Tôi chỉ cần thêm một phương pháp mới mà đã trong biến bộ lọc và nói với đối tượng của tôi những gì cột (s) tôi sẽ lọc ra.

Kết luận:

Tôi biết tôi didnt cung cấp cho mã thực tế hơn về một số chủ trương, thực hành tốt nhất của loại, và nhiều hơn nữa của một wiki sau đó một QA, nhưng nếu tôi có thể đã đi qua này nó có thể đã cứu tôi giờ trong tìm kiếm của tôi cho cách tốt nhất để lọc danh sách lớn ở phía máy khách.

Answer 2

Bạn có thể xem xét lọc danh sách có làm mới trang (phía máy chủ) không?

Tôi cho rằng việc hiển thị 2k dòng trong một trang không được thông báo.
Trên thực tế chỉ cần tải 2k dòng từ máy chủ là đã quá nhiều tôi nghĩ.
Nếu bạn cần cuộn, bạn có thể phân trang bằng ajax chẳng hạn.
Tuy nhiên, việc phân trang/lọc với ajax không phải là dễ dàng như nó có vẻ.