Tag Archives: jtable

CRUD è un acronimo (Create, Read, Update, Delete) ma è anche il cruccio quotidiano di chi deve gestire dati all’interno di un database.
jTable è un  plugin per la nota libreria jQuery che ci permette di creare tabelle per la gestione dei dati (CRUD appunto) scrivendo pochissimo codice HTML e con una piccola configurazione del javascript da inserire.
jTable funziona indipendentemente dal linguaggio di programmazione, utilizza AJAX per l’aggiornamento dei dati, è localizzato in molte lingue (italiano compreso), può funzionare con diversi temi predefiniti.

Il suo utilizzo base è semplicissimo. Basta includere oltre a jQuery le righe per il plugin e per il CSS del tema scelto

<!-- Include one of jTable styles. -->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />

<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

Poi si crea un contenitore

<div id="PersonTableContainer"></div>

E si aggiunge il javascript per creare l’istanza jTable

<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: '/GettingStarted/PersonList',
                createAction: '/GettingStarted/CreatePerson',
                updateAction: '/GettingStarted/UpdatePerson',
                deleteAction: '/GettingStarted/DeletePerson'
            },
            fields: {
                PersonId: {
                    key: true,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });
    });
</script>

Le azioni (action) indicano quali sono i file che gestiscono le interazioni col db.
Ogni colonna rappresenta un campo del db e possiamo impostarne la larghezza relativa in tabella e le caratteristiche come la modificabilità, il tipo, la possibilità di ordinamento su sua base.
Le tabelle così create caricano oggetti standard JSON risultanti delle azioni succitate (qualsiasi linguaggio serverside moderno può creare questo tipo di oggetto).

Link: jTable