Máy phân loại bảng Javascript nhanh?

Question

Tôi có một bảng với khoảng 250 hàng (có thể tăng gấp đôi trong vòng 6 tháng) và 50 cột trên this page (cảnh báo: chậm với IE). Tôi đang sử dụng JQuery Table sorter. Nhưng nó là quá chậm với IE 7: nó đưa ra một cảnh báo về một javascript chậm, và yêu cầu nếu tôi muốn ngăn chặn nó. Tôi đã dành rất nhiều thời gian để cải thiện màn trình diễn, vì vậy nó hoạt động tốt cho tất cả các trình duyệt khác: văn bản

• sắp xếp và chữ số chỉ
• loại bỏ tất cả nhưng 2 parsers
• tạo ra một bảng phụ có chứa tất cả các giá trị, nhanh hơn nhiều so với làm node.textContent() cho mỗi tế bào
• loại bỏ chữ thường, cắt vv

phiên bản của tôi về javascript là here. Tôi nghĩ rằng tôi không thể tối ưu hóa nó nhiều hơn nữa. Tôi đang tìm kiếm một triển khai nhanh chóng của một bảng phân loại, hoặc bất kỳ tối ưu hóa tốt tôi có thể đã quên, để IE 7 sẽ không phàn nàn về thời gian thực hiện.

Edit: tôi đã phân loại khuyết tật trên 35 cột, nó vẫn là quá dài cho IE

Answer 1

Tôi sử dụng sorttable một thư viện JavaScript sắp xếp bảng cực kỳ nhanh. (không phải JQuery)

Answer 2

giải pháp Hầu hết JScript mà làm việc chậm có rất nhiều sự tương tác với DOM. Hiện tại, bạn đang thực hiện chỉnh sửa cấp DOM hàng mỗi hàng, nó sẽ mất nhiều thời gian trong IE. Nếu bạn đang xây dựng HTML trong một chuỗi và sau đó đặt nó cùng một lúc trong DOM, nó sẽ đi nhanh hơn rất nhiều. (Có một số bản demo tại PDC cuối cùng cho thấy chính xác điều đó.)

Nhưng tinh thần của câu chuyện ở đây là bảng của bạn khá lớn. Bạn có thể nghĩ đến việc sử dụng REST, với phân trang bảng và phân loại và một số logic phía máy chủ. Tôi nghĩ rằng có thể nhanh hơn rất nhiều và sẽ hoạt động tốt với JQuery. (Và nó vẫn là một giải pháp AJAX.) Nó thậm chí có thể giúp bạn tiết kiệm một số băng thông ...

Hy vọng điều này sẽ giúp.

Answer 3

Một trong những điều tồi tệ nhất bạn có thể làm là sử dụng eval() và tôi thấy điều đó trong mã của bạn. Bạn nên cấu hình mã của bạn và xem nơi nút cổ chai là.

Answer 4

Vấn đề trong hàm buildCache (bảng) Đường dây 219 Lỗi: 'all_data' không định nghĩa

Answer 5

Bình luận ra bất kỳ tài liệu tham khảo để applyWidget và bindings tương ứng của họ cũng như loại bỏ parsers không sử dụng tạo ra một sự khác biệt lớn đến 500 bảng hàng trong IE6 (vâng, tôi biết, nhưng nó vẫn sẽ không chết).

Answer 6

Tôi là một fan hâm mộ lớn của bảng sorter jQuery Christian Bach ... http://tablesorter.com/docs/

• Nhỏ gọn và nhanh chóng
• Sắp xếp trên nhiều cột
• sọc
• mở rộng siêu dữ liệu tùy chọn động ngựa vằn làm cho mọi thứ thậm chí dễ dàng hơn
• Trình phân tích cú pháp để sắp xếp văn bản, html, số, bất kỳ thứ gì (dễ tùy chỉnh)
• Đầu đề có thể tạo kiểu CSS (tất nhiên)
• Trình duyệt chéo: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

EDIT: Bất cứ ai quan tâm đến việc tablesorter nên xem những gì Mottie đã làm với nó: https://github.com/Mottie/tablesorter

Answer 7

một cơ hội tốt và tùy chọn mạnh mẽ là plugin jQuery này, được gọi là DataTables.

• Variable dài pagination
• On-the-fly lọc
• Multi-cột sắp xếp với phát hiện kiểu dữ liệu
• xử lý thông minh của cột độ rộng
• hiển thị dữ liệu từ hầu như bất kỳ nguồn dữ liệu DOM, Javascript mảng, Tệp Ajax và xử lý phía máy chủ (PHP, C#, Perl, Ruby, AIR, Gears vv)
• Tùy chọn cuộn cho chế độ xem bảng
• Hoàn toàn internationalisable
• hỗ trợ jQuery UI ThemeRoller
• đá rắn - được hỗ trợ bởi một bộ 2900 đơn vị kiểm tra
• Có rất nhiều plug-ins inc. Trình chỉnh sửa, Bảng công cụ, FixedColumns và khác
• Hoàn toàn miễn phí!

Answer 8

Nếu bạn đang làm việc với các cơ sở dữ liệu lớn nghiêm túc, hãy thử phía máy chủ với DataTables (plugin jQuery).

Về cơ bản tất cả phân trang, lọc, sắp xếp vv mà DataTables có thể được chuyển sang máy chủ (hoặc bất kỳ nguồn dữ liệu nào khác).

Full ví dụ ở đây: http://datatables.net/examples/data_sources/server_side.html