tabla HTML ordenar

Question

Básicamente, estoy ejecutando una consulta mysql que obtiene datos de mi base de datos y los muestra en un diseño fácil de leer para mis usuarios. Nombre ----- Dirección ---- Persona de ventas

Ya entendió la esencia. Y ahora quiero que el usuario ordene la tabla html, digamos, persona de ventas. ¿Cómo podría hacerlo fácilmente usando un menú desplegable? Esto es lo que tengo hasta ahora ... Simplemente no sé cómo decirle al menú que ordene la tabla 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> 

Cualquier ayuda es muy apreciada.

Answer 1

Compruebe si puede ir con cualquiera de los plugins JQuery mencionados a continuación. Simplemente increíble y ofrece una amplia gama de opciones para trabajar y menos problemas para integrarse. :)

http://tablesorter.com/docs/ - Clasificador de tablas.
https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Tablas de datos.
https://github.com/tonytomov/jqGrid

Si no es así, es necesario tener un enlace a aquellos encabezados de tabla que llama a un script del lado del servidor para invocar la especie.

Answer 2

Sólo otra opción mediante un plugin de jQuery, breedjs: Si coloca los datos en un objeto js, ​​puede hacerlo simplemente así:

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> 

Ahora, cada vez que desee ordenar por vendedor, simplemente llámelo:

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

---

Si desea ordenar al hacer clic en <th>, hacer esto:

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

y modificar esto en HTML:

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

Working example on fiddle