• User Newbie

    Tabella html con ordine alfabetico

    Ciao a tutti,
    ho bisogno di un'anima buona che mi aiuti...
    Sto cercando di realizzare per il mio sito una tabella che dovrebbe contenere i dati dei clienti aderenti ad un determinato servizio.Con il sito a regime ci saranno centinaia di anagrafiche da inserire in tabella quindi è essenziale trovare un modo semplice sia per caricare i dati (non uno per uno nel codice html della singola casella della tabella) sia per mettere in ordine alfabetico i dati.
    La tabella dei miei sogni sarebbe una di quelle con contenuti ordinabili ma essendo il sito costruito in html5 su piattaforma WIX temo che non sia utilizzabile. Mi sa che non basta il semplice codice html infatti ma non si sa mai che invece qualcuno di voi...... 🙂
    Per il momento prendendo spunti in rete ho modificato questa tabella piegandola ai miei voleri anche se il caricamento dei dati è complesso in ottica di numeri elevati e le voci non sono in ordine alfabetico. Sarebbe molto importante che i contenuti fossero automaticamente inseriti nelle celle e che vi andassero in ordine alfabetico. Ovviamente l'ordine deve essere dato dal nome che poi si porta dietro gli altri attributi (indirizzo etc)
    presenti nelle altre celle della stessa riga.
    HO trovato una tabella che mette i dati in ordine alfabetico ma è molto brutta... chissà se si può fare un mix? Potete aiutarmi?
    Allego il codice della tabella "bella" anche se ne esisteranno di migliori e successivamente il codice di quella che cre l'ordine alfabetico...
    HELP ME!!!!!

    <table dir="ltr" width="900" border="1"
    summary="purpose/structure for speech output">
    <caption>
    </caption>
    <colgroup width="50%" />
    <colgroup id="colgroup" class="colgroup" align="center"
    valign="middle" title="title" width="1*"
    span="3" style="background:#ddd;" />
    <thead>
    <tr>
    <th scope="col">Ragione Sociale o Nome</th>
    <th scope="col">Comune</th>
    <th scope="col">Indirizzo</th>
    <th scope="col">Sconto Praticato</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>Paolo Valente</td>
    <td>Sala Consilina</td>
    <td>Corso garibaldi, 17</td>
    <td> 0%</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>Mario Rossi</td>
    <td>Sassano</td>
    <td>Via Roma, 1</td>
    <td> 15%</td>
    </tr>
    <tr>
    <td>Alessandra Lise</td>
    <td>Tito</td>
    <td>Corso Vittorio Emanuele, 10</td>
    <td> 10%</td>
    </tr>
    </tbody>
    </table>

    SEGUE CODICE TABELLA CON ORDINE ALFABETICO

    <html>
    <head>
    <title>Test sort</title>
    <script>
    function sortList(listId) {
    // Get the ul object
    var oUl = document.getElementById(listId);
    /* Perform a Bubble Sort on the list items /
    for(var i in oUl.childNodes) {
    var x = oUl.childNodes
    ;
    for(var j in oUl.childNodes) {
    var y = oUl.childNodes[j];
    if((x.innerText != 'undefined' || y.innerText != 'undefined') && x.innerText>y.innerText) {
    // Skip if x is already the first list item
    if(oUl.firstChild!=x)
    oUl.insertBefore(y,x);
    }
    }
    }
    }

    /* Define innerText for Mozilla based browsers */
    if((typeof HTMLElement != 'undefined') && (HTMLElement.prototype.defineGetter != 'undefined')) {
    HTMLElement.prototype.defineGetter("innerText", function () {
    var r = this.ownerDocument.createRange();
    r.selectNodeContents(this);
    return r.toString();
    });
    }

    window.onload=function() {
    sortList("names");
    }
    </script>
    </head>
    <body>
    <ul id="names">
    <li>Mario - Via di Vigna due Torri 93 </li>
    <li>Antonio - Via Ugo Jetti</li>
    <li>Carlo</li>
    <li>Alessia</li>
    </ul>
    </body>
    </html>


  • User Attivo

    Ciao gianlucag78, esistono script per creare tabelle in HTML che si possono ordinare per ogni colonna, basta cliccare la colonna.
    puoi trovare alcuni esempi qui

    
    http://tablesorter.com/docs/
    
    http://cssgallery.info/sortable-tables/
    
    

    Ciao, spero di essere stata d'auto.


  • User Newbie

    Wow,
    super super interessante ed utile. Grazie mille!