Ordenar listas

Enano_la22 · #1 (**permalink**) 05/07/2012, 08:35

Hola a todos, tengo que ordenar unas listas y encontre una libreria para hacerlo. Este es un ejemplo: http://listjs.com/examples/standard.html

El problema es que nose como utilizarlo. quise hacer el ejemplo

Código HTML:

<script type="text/javascript" src="list.js" ></script>
<a class="sort btn" data-sort="name" href="#">Sort by name</a>
<div id="hacker-list">
    <ul class="list">
       <li>
           <h3 class="name">Jonny</h3>
           <p class="city">Stockholm</p>
       </li>
       <li>
           <h3 class="name">Jonas</h3>
           <p class="city">Berlin</p>
       </li>
    </ul>
</div>
<script>

var options = {
    valueNames: ['name', 'city'] 
};

var hackerList = new List('hacker-list', options);



</script>

y agregue la libreria y la verdad es que no hace nada...... alguno sabe como utilizarla? Gracias!

rossijona · #2 (**permalink**) 05/07/2012, 08:55

No entiendo que es lo que necesitas hacer realmente.

Lista ordenada: <ol></ol>
Lista desordenada: <ul></ul>

Tu hablas de crear estilo a una lista?

Enano_la22 · #3 (**permalink**) 05/07/2012, 09:29

Hola gracias por responder....Lo que yo necesito es ordenar por varios criterios al hacer click en por ejemplo un link, o un boton....etc. esta libreria funciona pero nose como utilizarla no me sale!! alguno sabe como utilizarla o que estoy haciendo mal en el codigo?

Enano_la22 · #4 (**permalink**) 05/07/2012, 11:05

Alguna idea?

leonardo308 · #5 (**permalink**) 05/07/2012, 11:08

Prueba esto dejando el javascript de ultimo asi como esta. y esta funcion lo que hace es filtrar las palabras de la lista segun lo que escribas en el campo de texto.

Código HTML:

Ver original<div id="hacker-list">
    <input class="search" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="city">Sort by city</span>
 
    <ul class="list">
       <li>
           <h3 class="name">Jonny</h3>
           <p class="city">Stockholm</p>
       </li>
       <li>
           <h3 class="name">Jonas</h3>
           <p class="city">Berlin</p>
       </li>
    </ul>
</div> 
<script src="list.js" ></script>
<script type="text/javascript">
var options = {
    valueNames: [ 'name', 'city' ]
};
 
var hackerList = new List('hacker-list', options);
</script>

emprear · #6 (**permalink**) 05/07/2012, 13:01

Cita:

Iniciado por Enano_la22

Hola a todos, tengo que ordenar unas listas y encontre una libreria para hacerlo. Este es un ejemplo: http://listjs.com/examples/standard.html

El problema es que nose como utilizarlo. quise hacer el ejemplo

Código HTML:

<script type="text/javascript" src="list.js" ></script>
<a class="sort btn" data-sort="name" href="#">Sort by name</a>
<div id="hacker-list">
    <ul class="list">
       <li>
           <h3 class="name">Jonny</h3>
           <p class="city">Stockholm</p>
       </li>
       <li>
           <h3 class="name">Jonas</h3>
           <p class="city">Berlin</p>
       </li>
    </ul>
</div>
<script>

var options = {
    valueNames: ['name', 'city'] 
};

var hackerList = new List('hacker-list', options);



</script>

y agregue la libreria y la verdad es que no hace nada...... alguno sabe como utilizarla? Gracias!

tu error es que dejás el elemento que realiza el evento
<a class="sort btn" data-sort="name" href="#">Sort by name</a>
fuera del contenedor en el que se modifica el ordenamiento
<div id="hacker-list">
Para hacerla compatible con xhtml, en la linea 259 de list.js, podés reemplazar el valor del atributo (que es propietario de la script) data-sort, por alguno válido, yo opté por title

Código HTML:

Ver original<ul class="sort-by">
<li class="sort" title="name">Sort by name</li>
<li class="sort" title="city">Sort by city</li>
</ul>

Saludos

Enano_la22 · #7 (**permalink**) 06/07/2012, 06:44

Gracias a los dos!!! era ese el problema... Ahora les hago otra pregunta... en Firefox me funviona genial, pero en chrome no me anda.... alguno sabe como podria hacerlo andar en todos los navegadores?? gracias!

Enano_la22 · #8 (**permalink**) 06/07/2012, 07:21

Alguna idea?

emprear · #9 (**permalink**) 06/07/2012, 11:00

Cita:

Iniciado por Enano_la22

Alguna idea?

Si funciona en chrome

Código HTML:

Ver original<!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>
<title></title>
 
<style type="text/css">
/*<![CDATA[*/
 
.sort{
list-style-type: none;
cursor: pointer;
font-weight: bold;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="hacker-list">
<ul class="sort-by">
<li class="sort" data-sort="name">Sort by name</li>
<li class="sort" data-sort="city">Sort by city</li>
</ul>
<ul class="list">
<li>
<h3 class="name">Jonny</h3>
<p class="city">Stockholm</p>
</li>
<li>
<h3 class="name">Jonas</h3>
<p class="city">Berlin</p>
</li>
</ul>
</div>
<script src="list.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
 
var options = {
    valueNames: ['name', 'city'] 
};
 
var hackerList = new List('hacker-list', options);
 
//]]>
</script>
</body>
</html>

saludos