Sắp xếp bảng HTML

Question

Vì vậy, về cơ bản tôi đang chạy truy vấn mysql tìm nạp dữ liệu từ cơ sở dữ liệu của tôi và hiển thị nó trong một bố cục dễ đọc cho người dùng của tôi. Tên ----- Địa chỉ ---- Nhân viên bán hàng

Bạn nhận được ý chính. Và bây giờ tôi muốn cho phép người dùng sắp xếp bảng html bằng cách nói người bán hàng. Làm thế nào tôi có thể dễ dàng làm điều đó bằng cách sử dụng một trình đơn thả xuống? Đây là những gì tôi có cho đến nay .... Tôi chỉ không thực sự biết làm thế nào để nói với trình đơn để sắp xếp bảng html.

<div class='menu'> 
<ul> 
    <li><a href='#'><span>Sales Person</span></a> 
    <ul> 
    <li><a href='#'><span>Melissa</span></a></li> 
    <li><a href='#'><span>Justin</span></a></li> 
    <li><a href='#'><span>Judy</span></a></li> 
    <li><a href='#'><span>Skipper</span></a></li> 
    <li><a href='#'><span>Alex</span></a></li> 
    </ul> 
    </li> 
</div> 

Mọi trợ giúp đều được đánh giá cao.

Answer 1

Kiểm tra xem bạn có thể sử dụng bất kỳ plugin JQuery nào được đề cập dưới đây không. Chỉ đơn giản là tuyệt vời và cung cấp nhiều tùy chọn để làm việc thông qua, và ít đau đớn để tích hợp. :)

http://tablesorter.com/docs/ - Máy phân loại bảng.
https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Bảng dữ liệu.
https://github.com/tonytomov/jqGrid

Nếu không, bạn cần có liên kết đến các tiêu đề bảng này gọi tập lệnh phía máy chủ để gọi sắp xếp.

Answer 2

Chỉ cần một lựa chọn sử dụng một plugin jquery, breedjs: Nếu bạn đặt các dữ liệu trong một đối tượng js, bạn có thể 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>Name</th> 
      <th>Address</th> 
      <th>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 số:

breed.sort({ 
    scope: 'people', 
    selector: 'salesperson' 
}); 

---

Nếu bạn muốn sắp xếp khi nhấp vào <th>, làm điều này:

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

Và sửa đổi này vào HTML:

<th sort='name'>Name</th> 
<th sort='address'>Address</th> 
<th sort='salesperson'>Sales Person</th> 

Working example on fiddle