Home / Programmazione / C# - Asp.NET / jQuery DataTable e Asp.NET
Mattepuffo

jQuery DataTable e Asp.NET

jQuery DataTable e Asp.NET

I Web Form di Asp.NET hanno parrecchi controlli server utili, tipo le GridView per rappresentare i dati in forma tabellarre.

Io personalmene trovo questo controllo un pò obsoleto.

Ad esempio già per il fatto che quando fai il sorting la pagina viene ricaricata.....

Io ho optato per il plugin DataTable di jQuery, che già uso con soddisfazione in PHP.

Lo trovo molto più comodo e moderno.

Vediamo come usarlo in pagine Asp.NET.

Prima di tutto abbiamo una classica funzione che ci restituisce un DataSet o simili:

        public DataSet getCodiciClienti()
        {
            connection().Open();
            OdbcCommand cmd = new OdbcCommand();
            OdbcDataAdapter adapter = new OdbcDataAdapter();
            DataSet ds = new DataSet();
            cmd.CommandText = "SELECT * FROM clienti";
            cmd.Connection = conn;
            adapter.SelectCommand = cmd;
            adapter.Fill(ds);
            ds.Dispose();
            conn.Close();
            return ds;
        }

Nulla di nuovo.

Poi prepariamo a scarichiamo il tutto.

Abbiamo bisogno di jQuery, del plugin che troviamo qua, di una tabella per raccogliere i dati, di un file JS e di un controllo Repeater.

Quindi nell'head della pagina:

<link rel="stylesheet" type="text/css" href="Styles/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="Scripts/jquery182.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>

I primi due CSS servono per lo stile della tabella; notate che sto facendo uso di un CSS di jQuery UI.

Questa la funzione JS:

$(document).ready(function () {
    $('.dtable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    });
});

Con il primo parametro indico di usare lo stile di jQuery UI.

Nel code-behind della pagina:

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                repeaterClienti.DataSource = db.getCodiciClienti();
                repeaterClienti.DataBind();
            }
            catch (OdbcException ex)
            {
            // DA IMPLEMENTARE IL MESSAGGIO DI ERRORE
            }
        }

Praticamente faccio il Bind del repeatre che abbiamo nella pagina in modo da dirgli su cosa ciclare per creare le righe.

Nella pagina avremo il controllo Repeater:

<asp:Repeater ID="repeaterClienti" runat="server">
        <HeaderTemplate>
            <table class="dtable display">
                <thead>
                    <tr>
                        <th>
                            CODICE
                        </th>
                        <th>
                            RAGIONE SOCIALE
                        </th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>
                            CODICE
                        </th>
                        <th>
                            RAGIONE SOCIALE
                        </th>
                    </tr>
                </tfoot>
                <tbody>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "CODICE") %>
                </td>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "RAGIONE") %>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </tbody> </table>
        </FooterTemplate>
    </asp:Repeater>

Nell'intestazione del Repeater abbiamm l'intestazione della tabella.

Poi abbiamo il corpo della tabella, che si riempirà dai dati estratti dal DataSet.

Tra virgolette i nomi dei campi da cui prendere i valori.

Infine il footer del Repeater dove chiudiamo la tabella.

Il lavoro sporco, come avete capito, lo farà proprio il Repeater; ci penserà lui a ciclare senza farci scrivere noi i possibili ciclo for o foreach.