Sắp xếp bảng HTML nhanh?

Question

Có, tôi biết có một số lô của các chương trình JS/jQuery để thực hiện việc này. Tôi hiện đang sử dụng http://www.kryogenix.org/code/browser/sorttable/sorttable.js. Nó rất dễ dàng: chỉ là một tệp JS, thêm một vài thuộc tính lớp vào bảng của bạn và bạn tắt. Đặc biệt, bạn không thực sự cần biết JS để sử dụng nó, và bạn có thể thêm các phím sắp xếp tùy chỉnh mà không cần phải viết JS của riêng bạn để mở rộng nó. Tôi thích nó rất nhiều vì hai lý do đó. Vấn đề chính: bảng của tôi là ~ 9300 hàng dài, và phân loại mất 10-20 giây. Vì vậy, tôi tự hỏi, có bất kỳ kịch bản khác ra có nhanh hơn này? Đây là những cái tôi đã tìm thấy:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (Thậm chí chắc chắn những gì này sử dụng)
http://tablesorter.com/docs/ (Really thật sự tốt đẹp, nhưng không dễ dàng để mở rộng, đòi hỏi phải biết JS/jQuery) http://flexigrid.info/ (Overkill, tôi chỉ cần một sorter bảng, không phải là một chương trình thao tác dữ liệu toàn bộ)
http://datatables.net/ (Overkill, đòi hỏi Js/jQuery để mở rộng)

tôi chắc chắn rằng có 5000 chương trình khác có thể làm những gì tôi muốn, nhưng tôi không có thời gian để tìm ra và kiểm tra tất cả để xem họ có nhanh không. Vì vậy, tôi muốn biết nếu có ai đó ở đó trên StackOverflow có thể chỉ cho tôi đến thư viện nào họ biết là nhanh, vì vậy tôi chỉ phải tìm ra cách sử dụng một chương trình.

(Btw, tôi đã nhìn thấy Java hàng trăm loại hàng ngàn con số trong mili giây với quicksort; không ai biết những gì thuật toán JS.sort() sử dụng?)

Answer 1

Tôi đã có thành công lớn với DataTables (khác jQuery plugin) với số hàng tương tự với những gì bạn đang nói đến. Sự mất mát tốc độ mà bạn đang thấy với javascript so với những gì bạn đã thấy trong java là nó thực sự dựng một DOM, đó là nhiều công việc hơn. Vẻ đẹp của DataTables là bạn có khả năng mã nguồn dữ liệu từ một mảng javascript (chủ yếu là json) - do đó việc phân loại được thực hiện trên mảng (tốc độ tương tự như java), và sau đó chỉ là một phần của bảng mà người dùng cần xem được tạo trong DOM.

Xem các url ví dụ:

http://datatables.net/examples/data_sources/js_array.html

hoặc

http://datatables.net/examples/data_sources/ajax.html

tôi đề nghị sử dụng sau này. Nếu nó vẫn không đủ nhanh sử dụng một mảng json tĩnh, bạn sẽ muốn xây dựng một kịch bản phía máy chủ để có những javascript giảm tải - ví dụ tuyệt vời với mã serverside đây:

http://datatables.net/examples/data_sources/server_side.html

Edit: Infinite Scrolling

Như đã thảo luận trong các ý kiến, vấn đề không phải là sắp xếp, mà là chuyển đổi bảng HTML thành JS và ngược lại. Điều này có thể giúp bằng cách chỉ tải các phần hiển thị của kiểu trả về khi người dùng xem nó; máy chủ cũng cung cấp cho JS thông tin giống như bảng dưới dạng JSON. Hai kỹ thuật này loại bỏ sự chuyển đổi HTML-JS và các vấn đề hiển thị, và do đó làm tăng đáng kể tốc độ.

HTML (đây là tất cả những gì đã được trả lại ban đầu trước khi JSON đến cùng - thêm bao nhiêu thẻ thứ như bạn có cột):

<table id="table_id"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>etc</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

jQuery:

$(document).ready(function() { 
    $('#table_id').dataTable({ 
     "bScrollInfinite": true, 
     "bScrollCollapse": true, 
     "sScrollY": "200px", 
     "bProcessing": true, 
     "sAjaxSource": 'array.txt' 
    }); 
}); 

mảng. txt chứa:

{ "aaData": [ 
    ["This will be in column 1","This in two","this in 3"], 
    ["another row - column 1","another two","another 3"] 
]} 

Answer 2

Ngoài thư viện, việc sắp xếp bảng dễ dàng thực hiện một mình.

Thời gian cần để sắp xếp các hàng là không đáng kể liên quan đến thời gian DOM cần di chuyển các mục xung quanh.

Điều duy nhất S give cung cấp cho bạn hiệu suất tốt nhất, là tách các hàng, sắp xếp chúng theo nhu cầu của bạn và đính kèm lại. Bạn không cần dữ liệu JSON thô, chỉ cần tách $ tr's, lấy các giá trị bạn muốn so sánh từ td's, tạo một mảng $ tr's, sắp xếp mảng này theo cột bạn muốn và đính kèm chúng vào tbody của bạn.

Ví dụ, với kỹ thuật này, tôi sắp xếp 3000 hàng 15 cột trong 1 giây, điều này hoàn toàn khả thi. Với hiệu suất đó, vấn đề duy nhất là cách tìm nạp 3000 hàng cho trình duyệt ...