Sortowanie tabeli HTML

Question

W zasadzie używam zapytania mysql, które pobiera dane z mojej bazy danych i wyświetla je w czytelnym dla moich użytkowników układzie. Nazwa ----- Adres ---- Osoba do sprzedaży

Dostajesz sens. A teraz chcę pozwolić użytkownikowi sortować tabelę html przez, powiedzmy, sprzedawcę. Jak mógłbym to łatwo zrobić za pomocą rozwijanego menu? To jest to, co do tej pory ... Po prostu nie wiem jak powiedzieć menu, aby posortować tabelę 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> 

Każda pomoc jest bardzo doceniana.

Answer 1

Sprawdź, czy możesz skorzystać z którejkolwiek z wymienionych poniżej wtyczek JQuery. Po prostu niesamowite i zapewniają szeroki zakres opcji do wykonania i mniej problemów z integracją. :)

http://tablesorter.com/docs/ - Sortownik stołu.
https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Tabele danych.
https://github.com/tonytomov/jqGrid

Jeśli nie, trzeba mieć link do tych nagłówków tabeli, która wywołuje skrypt po stronie serwera do powoływania sortowania.

Answer 2

Kolejna opcja za pomocą wtyczki jQuery breedjs: Jeśli umieścić dane w obiekcie js, można to zrobić tylko tak:

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> 

Teraz za każdym razem, gdy chcesz posortować według sprzedawcy, po prostu zadzwoń:

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

---

Jeśli chcesz posortować po kliknięciu na <th>, to zrobić:

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

i modyfikować to na HTML:

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

Working example on fiddle