Integrare Twitter Bootstrap e jQuery DataTables

Ho già parlato sia di Twitter Bootstrap che di jQuery DataTables.

Il primo è un framework CSS / JS ideato e usato dai creatori di Twitter; il secondo un plugin per jQuery per intabellare i dati con opzioni e modalità.

In realtà TB ha già il supporto per le tabelle, solo che non ha tutte quello opzioni come filtri, ordinamento, ecc.; che troviamo invece in DT.

E quindi, noi che non ci accontentiamo mai, perchè non integriamo le due cose??

Ed è quello che faremo.

Prima di tutto richiamiamo ciò che ci serve:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="css/bootstrap_dt.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="script/bootstrap_dt.js"></script>

Come vedete, jQuery, TB e DT li prendo da CDN e non da locale.

Poi abbiamo bootstrap_dt.css e bootstrap_dt.js che ci servono per integrare i due componenti.

Detto ciò passiamo alla tabella:

        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered 0_asc">
            <thead>
                <tr>
                    <th>TH 1</th>
                    <th>TH 2</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>TH 1</th>
                    <th>TH 2</th>
                </tr>
            </tfoot>
            <tbody>
                ................
            </tbody>
        </table>

L'ultima classe impostata (0_asc) ci servirà per avviare DT.

I due file sono abbastanza lunghi, quindi direi che ve li metto come allegati:

• bootstrap_dt.css
• bootstrap_dt.js

Comunque alla fine di bootstrap_dt.js abbiamo l'avvio di DT:

$(document).ready(function() {
    $('.0_asc').dataTable({
        "sPaginationType": "bootstrap",
        "aaSorting": [[0, "asc"]],
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
});

Direi che è quanto; ovviamente il grosso del lavoro lo fanno i due file in allegato.