JQuery: Tablesorter

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

NOTA: per al curs 18-19 és possible fer aquesta mateixa pràctica amb la llibreria:

Tablesorter és un plugin de jQuery que converteix una taula HTML estàndard amb tags THEAD i TBODY en una taula que es pot ordenar per columnes, sense haver de refrescar la pàgina. tablesorter pot parsejar i ordenar de manera satisfactòria molts tipus de dades contingudes en les cel.les. Té moltes característiques com per exemple:

Referències

Curs 18-19:

En aquesta pàgina de documentació veiem que la versió actual és la 2.31.1. Allà on indica la versió tenim l'enllaç per tal de descarregar la llibreria.

Un cop descarregat, pots provar tots els exemples que estan dins de docs/, doncs aquests exercicis ja tenen les rutes correctes a la llibreria tablesorter i jquery. (La llibreria jquery no cal descarregar-la, doncs inclou el fitxer docs/js/jquery-latest.min).

El primer que has de fer és provar algun dels exemples dins de docs/, i veure quina és l'estructura de directoris on es va a buscar les llibreries i els CSS. Quan hagis de fer el teu exercici pots programar-lo dins de docs/. Però si vols utilitzar un altre directori, hauràs d'accedir correctament a les llibreries.

NOTA: No funciona? (17-18)

El més pràctic Alguns dels exemples de la carpeta tests/ no funcionen. Per fer-los funcionar, recordar que s'ha de posar:

class="tablesorter"

dins de la taula, i que la manera de referenciar el full d'estils és (en comptes de posar @import):

<link rel="stylesheet" href="../themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />	

Sembla ser que hi ha una incoherència entre els exemples dins la carpeta tests/ i la versió que has descarregat del tablesorter. Però al final, ha d'acabar funcionant.

Desenvolupament

Feina per l'alumne

A classe s'ha vist algun exemple extret de la web de tablesorter.com, s'ha mirat la documentació, i s'ha justificat la necessitat de tenir taules ordenables, i com gràcies a jQuery aquesta tasca pot esdevenir molt fàcil i amb poques línies de codi.

L'alumne ha d'implementar una taula HTML a partir de dades reals (per exemple pots extreure dades del Institut Nacional d'Estadística, http://www.ine.es/ o de l'Institut Català d'Estadística, http://www.idescat.cat), i fer que les columnes siguin ordenables. Quan diem dades reals el professor vol dir taules que continguin centenars o milers de dades.

Exemple: noms dels nadons de Catalunya:

També pots utiltizar el servei:

que ens proporciona dades aleatòries en format JSON.

Servei Web del IDESCAT

El IDESCAT ens permet accedir a les dades mitjançant una API. Anem a: http://www.idescat.cat/ > Serveis > API:

Disposem d'una documentació abundant, clara i precisa.


Resum:

Tenim diferents APIs disponibles, per ex, cerca de població: pob

Diversos exemples:

Ex. 1: Llista d'entitats territorials que comencen amb "ab", separades per salts de línia

Ex. 2: Llista de municipis i nuclis de població que comencen amb "ca", en format json

Ex. 3: Població de totes les comarques de Catalunya, en format XML

i en format JSON:

Ex4: noms de persones que comencen per 'a':

Ex5: llista de tots els municipis de Catalunya, en format JSON:

Llista de municipis

En la primera versió recollim les dades dels municipis i omplim una llista HTML. Ho fem amb JQuery;

llista_municipis_v1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Llista de municipis de Catalunya, v1</title>
		
	<script src="../jquery-latest.js"></script>
	<script>
	$(document).ready(function(){
	$.getJSON("http://api.idescat.cat/emex/v1/dades.json?tipus=mun", function(data){
		var info = data.fitxes.cols.col;
		$.each(info, function(i,field) {
			$("#municipis").append("<li>" + field.id+" - " + field.content + "</li>");
		});
	});
});
</script>
<body>
<h1>Llista de municipis, v1</h1>
<p>
	<ul id="municipis"></ul>
</p>
</body>
</html>

En aquest exemple fem servir les següents funcions de jQuery:

Un cop funciona, ja podem afegir una taula tablesorter per carregar de forma dinàmica els valors.


llista_municipis_v2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Llista de municipis de Catalunya, v2</title>
		
	<link rel="stylesheet" href="../themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />	

	<script src="../jquery-latest.js"></script>
	<script src="../jquery.tablesorter.js"></script>

	<script>

	$(document).ready(function(){

		$("table").tablesorter();

		$.getJSON("http://api.idescat.cat/emex/v1/dades.json?tipus=mun", function(data){
			var info = data.fitxes.cols.col;
			$.each(info, function(i,field) {
				$("tbody").append("<tr><td>"+field.id+"</td><td>"+field.content+"</td></tr>");
				//o bé:
				//row = '<tr><td>' + field.id + '</td><td>' + field.content + '</td></tr>';
				//$("table/tbody:first").append(row);
			});
			//important!:
			$("table").trigger('update');
		});
	});
	</script>
<body>
<h1>Llista de municipis, v2</h1>
<p>
	<ul id="municipis"></ul>
</p>

<table cellspacing="0" class="tablesorter">
	
	<thead>
		<tr>
			<th>ID</th>
			<th>Municipi</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>		
</body>
</html>

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, abril 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines