Hola que tal tengo un arreglo en json y quiero mostrarlo en un tabla pero al seleccionar un select me lo ordene alfabéticamente.
Aquí el codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<select id="ordena">
<option value="0">Seleccione</option>
<option value="1">Ordenar por nombre</option>
<option value="2">Ordenar por edad</option>
</select>
<script type="text/jscript" language="javascript">
$('#ordena').change(function() {
alert ('hola');
var seleccion=$('#ordena').val();
alert (seleccion);
var persona= [{"nombre": "Miguel Angel Reyna", "edad" : 26, "sexo" : "Masculino" },
{"nombre": "Karina Gonzalez", "edad": 22, "sexo": "Femenino"},
{"nombre": "Jimena Navarrete", "edad": 27, "sexo": "Femenino"},
{"nombre": "Uribe Peralta", "edad": 29, "sexo": "Masculino"},
{"nombre": "Jesús Corona", "edad": 38, "sexo": "Masculino"},
{"nombre": "Raúl Aloson Jimenez", "edad": 24, "sexo": "Masculino"},
{"nombre": "Rocio Duarte", "edad": 27, "sexo": "Femenino"}];
var datos = eval(persona);
//console.log(datos.personas);
alert (datos.nombre);
var datos=persona.sort(function (a,b) {
var A = $(a).text().toUpperCase();
var B = $(b).text().toUpperCase();
return ($(b).text()) > ($(a).text()) ? 1 : -1;
})
var tabla = '<table cellpadding="0" cellspacing="0" border="1" class="display" id="lista_paciente">';
tabla += '<caption>Mi Tabla</caption>';
tabla += '<thead>';
tabla += '<tr>';
tabla += '<th>Nombre</th><th>Edad</th><th>Sexo</th>';
tabla += '</tr>';
tabla += '</thead>';
tabla += '<tbody>';
tr = '';
for (i=0; i<datos.length; i++ )
{
//alert (datos[i].nombre);
tr += '<tr>';
tr += '<td>'+datos[i].nombre+'</td><td>'+datos[i].edad+'</td><td>'+datos[i].sexo+'</td>';
tr += '</tr>';
}
tabla += tr;
tabla += '</tbody></table>';
$('#lista').html( tabla );
});
</script>
<div id="lista"></div>
</body>
</html>