JQuery: Tablesorter

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Requeriments: Veure la teoria de JQuery: a la wiki i en un tutorial com ara w3schools:

NOTA: per al curs 18-19 és possible fer aquesta mateixa pràctica amb la llibreria datatables (que no és JQuery):

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:

  • ordenació multi-columna
  • parsers per ordenar text, URIs, enterns, monedes, floats, direccions IP, dates (ISO, long and short formats), time
  • Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Extensibility via widget system
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Small code size

Referències

Curs 19-20:

En aquesta pàgina de documentació veiem que la versió actual és la 2.31.3. 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:

  • URI base: http://api.idescat.cat/{servei}/v{versió principal}/{operació}.{format}[?paràmetres]
  • Mètode: HTTP GET
  • Formats de la resposta: xml, json, php
  • Versió: 1.00 (14.12.2009)
  • Dreceres: Petició, Resposta

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, curs 19-20

Respecte del curs anterior, a l'hora d'accedir a l'API de IDESCAT hem tingut problemes amb el CORS. Per resoldre-ho, hem mirat a:

I la solució més senzilla que funciona és (està cap al final del post):

script llista_municipis_v0.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>Javascript Test</title>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                $.ajax({
                    xhrFields: {cors: false},
                    type: "GET",
                    url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
                    success: function (data) {
                    alert("Núm municipis: " + data.fitxes.cols.col.length);
                },
                error: function (x, y, z) {
                    alert(x.responseText + " :EEE: " + x.status);
                }
            });
        });
    </script> 
</head>
<body>
</body>
</html>

Abans de fer el tablesorter, podem mostrar els municipis en una llista html, omplint una llista amb JQuery:

script llista_municipis_v1.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>Llista municipis</title>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                $.ajax({
                    xhrFields: {cors: false},
                    type: "GET",
                    url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
                    success: function (data) {
                    //alert("Núm municipis: " + data.fitxes.cols.col.length);
                    var info = data.fitxes.cols.col;
                    $.each(info, function(i,field) {
                        $("#municipis").append("<li>" + field.id+" - " + field.content + "</li>");
                    });
                },
                error: function (x, y, z) {
                    alert(x.responseText + " :EEE: " + x.status);
                }
            });
        });
    </script> 
</head>
<body>
<h1>Llista de municipis, v1</h1>
<p>
    <ul id="municipis"></ul>
</p>
</body>
</html>

I finalment, ara ja podeu integrar un dels codis tablesorter que us han funcionat amb les vostres dades dels municipis. Per exemple, el professor ha fet servir el codi de docs/index.html (però he tingut un problema: cursiosament la referència docs/js/jquery-1.2.6.min.js no funciona; i en canvi docs/js/jquery-latest.min.js sí que m'ha funcionat).

script llista_municipis_v2.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>Llista municipis</title>
    <meta charset="UTF-8">
    <!-- Demo styling -->
    <link href="./docs/css/jq.css" rel="stylesheet">

    <!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->

    <script src="./docs/js/jquery-latest.min.js"></script>
    <!-- Pick a theme, load the plugin & initialize plugin -->
    <link href="./dist/css/theme.default.min.css" rel="stylesheet">
    <script src="./dist/js/jquery.tablesorter.min.js"></script>
    <script src="./dist/js/jquery.tablesorter.widgets.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
                $.ajax({
                    xhrFields: {cors: false},
                    type: "GET",
                    url: "http://api.idescat.cat/emex/v1/dades.json?tipus=mun",
                    success: function (data) {
                    //alert("Núm municipis: " + data.fitxes.cols.col.length);
                    var info = data.fitxes.cols.col;
                    //$.each(info, function(i,field) {
                    //    $("#municipis").append("<li>" + field.id+" - " + field.content + "</li>");
                    //});
                    $.each(info, function(i,field) {
                        $('table').tablesorter({
                            widgets        : ['zebra', 'columns'],
                            usNumberFormat : false,
                            sortReset      : true,
                            sortRestart    : true
                        });
                        $("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');
                },
                error: function (x, y, z) {
                    alert(x.responseText + " :EEE: " + x.status);
                }
            });
        });
    </script> 
</head>
<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>

L'alumne, a part de l'exercici dels municipis, hauríeu de cercar alguna altra font de dades del IDESCAT.

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