Home / Programmazione / Javascript - AJAX / jQuery Mobile Table Sorter
Mattepuffo

jQuery Mobile Table Sorter

jQuery Mobile Table Sorter

jQuery Mobile ha un buon supporto per la tabelle.

Inoltre, ultimamente, sono state fatte delle aggiunte interessanti; come vedremo, infatti, JQM ci da la possibilità di levare / aggiungere delle colonne in visualizzazione, nascondendone alcune in base allo schermo.

Però di default le tabelle non hanno la possibilità di essere ordinate; andremo quindi ad integrare il tutto con un alro plugin per fare in modo che si possa ordinare la tabella cliccando sull'intestazione.

Il plugin lo trovare qua; una volta scaricato e scompattato va aggiunto alla pagina:

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="tablesorter/jquery.tablesorter.min.js"></script>

A questo punto mettiamo su la tabella:

<div data-role="content">    
    <table data-role="table" id="table-column-toggle" data-mode="columntoggle"
           class="ui-body-d ui-shadow table-stripe ui-responsive"
           data-column-btn-theme="a" data-column-popup-theme="c">
        <thead>
            <tr class="ui-bar-a">
                <th data-priority="1">Titolo</th>
                <th data-priority="1">Creazione</th>
                <th data-priority="2">Modifica</th>
                <th data-priority="3">Count</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($articoli->getArticoliPerPubblicazione() as $a): ?>
                <tr>
                    <td><?php echo $a['a_titolo']; ?></td>
                    <td><?php echo $a['a_creazione']; ?></td>
                    <td><?php echo $a['a_modifica']; ?></td>
                    <td><?php echo $a['a_count']; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

In questo caso i dati li prendo con una query su database usando PHP.

Come vedete nel THEAD ho messo l'attributo data-priority; questo serve per dire quali colonne dovranno essere sempre visibili a prescindere dalla dimensione della pagina, e quali via via nascondere.

Nel mio caso ce ne saranno sempre due visibili.

Notate anche tutti gli attribiuti messi nella tabella.

Se guardate sopra la tabella c'è un pulsante con scritto Columns...; se ci cliccate sopra vedrete tutte le colonne presenti con il flag che indica se sono visibili sulla pagina o meno.

A questo punto attiviamo il sorter:

            $(document).ready(function() {
                $("#table-column-toggle").tablesorter();
            });

Basta indicare l'ìd della tabella; adesso cliccando sull'intestazione, le righe verrano riordinate.

Ciao!!