Premiers pas avec les tables de données

API DataTables #

DataTables est livré avec une API étendue qui est utilisée pour manipuler ou obtenir des informations sur les DataTables sur une page.

L’API est accessible de 3 manières :

var table = $('#tableid').DataTable(); //DataTable() returns an API instance immediately
var table = $('#tableid').dataTable().api(); //dataTable() returns a jQuery object
var table = new $.fn.dataTable.Api('#tableid');

Une fois l’objet défini, vous pouvez appeler n’importe quelle fonction API sur cet objet.

var columns = table.columns();

Un exemple plus complexe consiste à [ajouter des lignes][1] à votre tableau :

table.rows.add( [ {
        "name":       "John Doe",
        "employee_id":   "15135",
        "department":     "development",
    }, {
        "name":       "Jane Smith",
        "employee_id":   "57432",
        "department":     "quality assurance",
    } ] )
    .draw();

La liste complète des fonctions de l’API peut être trouvée [ici][2].

[1] : https://datatables.net/reference/api/rows.add() [2] : https://datatables.net/reference/api/

Initialisation d’un DataTables minimal : #

Le code ci-dessous transformera la table avec un identifiant de tableid en DataTable, ainsi que renverra une instance d’API DataTables :

$(document).ready(function() {
    $('#tableid').DataTable();
});

Comparez cela au code ci-dessous, qui transformera la table en DataTable mais ne renverra pas d’instance d’API DataTables :

$(document).ready(function() {
    $('#tableid').dataTable();
});

Voir la section [Documentation de l’API DataTables][1] pour plus de détails sur ce qui peut être fait avec l’instance de l’API DataTables.

[1] : https://www.wikiod.com/fr/datatables/premiers-pas-avec-les-tables-de-donnees#API DataTables

Installation #

Avoir les fichiers JavaScript et CSS requis inclus dans votre index.html. Vous pouvez le faire soit en utilisant les fichiers CDN disponibles aux chemins suivants :

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>

Ou en téléchargeant des fichiers locaux individuels et en les hébergeant vous-même. Pour obtenir un package complet de fichiers JavaScript et CSS requis, visitez les DataTables [download builder][1] qui vous permettront de choisir les fonctionnalités dont vous avez besoin et de les condenser en un seul package (ou de proposer des fichiers individuels). Incluez-les dans l’ordre affiché au bas de la page.

DataTables dépend de jQuery, donc incluez-le avant jquery.dataTables.js :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

Les tables de données sont également disponibles via NPM

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling

et tonnelle

bower install --save datatables.net
bower install --save datatables.net-dt

[1] : https://datatables.net/download/index

Fonction Activer/Désactiver (Options DataTables) #

DataTables a la capacité d’activer ou de désactiver un certain nombre de ses fonctionnalités, telles que la pagination ou la recherche. Pour choisir ces options, il suffit de les sélectionner dans votre initialisation :

$(document).ready(function() {
    $('#tableid').DataTable( {
        "paging":   false, //Turn off paging, all records on one page
        "ordering": false, //Turn off ordering of records
        "info":     false  //Turn off table information
    } );
} );

Notez que les guillemets autour des noms d’options sont facultatifs :

paging: false,
ordering: false,
info: false

Est également parfaitement valable.

Une liste complète des options peut être trouvée [ici] [1], ainsi que des descriptions des utilisations de chaque option.

Ces options ne peuvent être définies qu’une seule fois, lors de l’initialisation de la table. Cependant, vous pouvez contourner cette limitation en ajoutant :

 destroy: true

[1] : https://datatables.net/reference/option/