Tiêu đề bảng jQuery sắp xếp

Question

Bất kỳ ai biết plugin hoặc chức năng được tích hợp sẵn để làm cho các cột trong bảng có thể sắp xếp được? tức là tôi nhấp vào tiêu đề cột và nó sắp xếp các hàng theo cột đó?

Answer 1

Các Ext JavaScript library là rất tốt ở đó.

Answer 2

http://tablesorter.com/docs/ rất dễ sử dụng với nhiều tùy chọn cho phù hợp với nhu cầu của bạn. :)

Answer 3

Một nặng chút, nhưng người quản lý bảng jQuery cuối cùng là jqGrid

Answer 4

http://www.flexigrid.info/

Flexigrid là một người quản lý bảng rất phổ biến, và dễ dàng/sorter để sử dụng.

Answer 5

Dưới đây là hai loại đó và làm được nhiều điều khác nữa mà tôi vẫn chưa gặp được liệt kê:

• DataTables
• SlickGrid

Đây cũng là một bảng so sánh nhiều bảng dữ liệu: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 6

Plugin jquery giúp sắp xếp, lọc và phân trang: breedjs

Ví dụ:

Đặt các dữ liệu trong một đối tượng js để làm giống như vậy:

var data = { 
    people: [ 
     {name: 'a', address: 'c', salesperson: 'b'}, 
     {name: 'b', address: 'b', salesperson: 'a'}, 
     {name: 'c', address: 'a', salesperson: 'c'}, 
    ] 
}; 

breed.run({ 
    scope: 'people', 
    input: data 
}); 

HTML:

<table> 
    <thead> 
     <tr> 
      <th sort='name'>Name</th> 
      <th sort='address'>Address</th> 
      <th sort='salesperson'>Sales Person</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr b-scope="people" b-loop="person in people"> 
      <td b-sort="name">{{person.name}}</td> 
      <td b-sort="address">{{person.address}}</td> 
      <td b-sort="salesperson">{{person.salesperson}}</td> 
     </tr> 
    </tbody> 
</table> 

Bây giờ, mỗi khi bạn muốn sắp xếp theo nhân viên bán hàng, chỉ cần gọi nó là:

breed.sort({ 
    scope: 'people', 
    selector: //field name 
}); 

Xem:

$("th").click(function(){ 
    breed.sort({ 
     scope: 'people', 
     selector: $(this).attr('sort') 
    }); 
}); 

Working example on fiddle