data-priority

Mattepuffo's logo
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>