datatablesDémarrer avec les données


Remarques

Principales caractéristiques

  • Pagination de longueur variable
  • Filtrage à la volée
  • Tri multi-colonnes avec détection de type de données
  • Gestion intelligente des largeurs de colonne
  • Afficher des données à partir de presque n'importe quelle source de données
  • DOM, tableau JavaScript, fichier Ajax et traitement côté serveur
  • Options de défilement pour la fenêtre de tableau
  • Entièrement internationalisable
  • Prise en charge de jQuery UI ThemeRoller
  • Grande variété de plug-ins
  • C'est gratuit

Ressources

Versions

Version Notes de version Date de sortie
1.9 et plus tôt (héritage) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014-02-01
1.10 et plus tard https://datatables.net/new/1.10 2015-08-12

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 laquelle des fonctions de l'API sur cet objet.

var columns = table.columns();
 

Un exemple plus complexe consiste à ajouter des lignes à votre table:

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 .

Fonction Activer / Désactiver (Options DataTables)

DataTables peut activer ou désactiver un certain nombre de ses fonctionnalités, telles que la pagination ou la recherche. Pour choisir ces options, sélectionnez-les simplement 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 entourant les noms d'options sont facultatifs:

paging: false,
ordering: false,
info: false
 

Est également parfaitement valide.

Une liste complète des options peut être trouvée ici , avec des descriptions des utilisations de chaque option.

Ces options ne peuvent être définies qu'une seule fois, lorsque la table est initialisée. Cependant, vous pouvez contourner cette limitation en ajoutant:

 destroy: true
 

Initialiser un DataTables minimal:

Le code ci-dessous transformera la table avec un identifiant de tableid en un DataTable, et renverra une instance de l'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();
});
 

Consultez la section de documentation de l'API DataTables pour plus de détails sur ce qui peut être fait avec l'instance de l'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 sur les 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 ensemble complet de fichiers JavaScript et CSS requis, visitez le générateur de téléchargement de DataTables qui vous permettra de choisir les fonctionnalités dont vous avez besoin et de les condenser dans un seul package (ou d’offrir des fichiers individuels). Incluez-les dans l'ordre affiché au bas de la page.

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

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

Les DataTables sont également disponibles via NPM

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

et Bower

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