Intégrer Datatables à un index dans Bonfire

Le plugin DataTables pour jQuery est intégré par défaut à Bonfire (à partir de la version 0.7 a minima). Il permet d’ajouter différentes fonctionnalités à un tableau (tri par colonne, pagination, recherche plein texte…) et est particulièrement utile pour les pages index.php de Bonfire. Il est également utilisé dans le module « Activities » de l’application.

Intégration

Dans la fonction __construct() du contrôleur du module où vous souhaitez intégrer cette fonctionnalité, copier/coller les lignes suivantes :

$this->lang->load('datatable');
Assets::add_js(Template::theme_url('js/bootstrap.js'));
Assets::add_js( array ( Template::theme_url('js/jquery.dataTables.min.js' )) );
Assets::add_js( array ( Template::theme_url('js/bootstrap-dataTables.js' )) );
Assets::add_css( array ( Template::theme_url('css/datatable.css') ) ) ;
Assets::add_css( array ( Template::theme_url('css/bootstrap-dataTables.css') ) ) ;

Dans la fonction index() du même contrôleur, copier/coller la ligne suivante :

Assets::add_js($this->load->view('content/js', null, true), 'inline');

Parmi les vues du module, créer un fichier js.php avec le contenu suivant :

$("#flex_table").dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"iDisplayLength": <?php echo ($this->settings_lib->item('site.list_limit')) ? $this->settings_lib->item('site.list_limit') : 15; ?>,
"bInfo": true,
"bPaginate": true,
"bProcessing": true,
"bServerSide": false,
"bLengthChange": false,
"aaSorting": [[3,'desc']],
"bAutoWidth": true,
"oLanguage": {
"sProcessing":   "<?php echo lang('sProcessing') ?>",
"sLengthMenu":   "<?php echo lang('sLengthMenu') ?>",
"sZeroRecords":  "<?php echo lang('sZeroRecords') ?>",
"sInfo":         "<?php echo lang('sInfo') ?>",
"sInfoEmpty":    "<?php echo lang('sInfoEmpty') ?>",
"sInfoFiltered": "<?php echo lang('sInfoFiltered') ?>",
"sInfoPostFix":  "<?php echo lang('sInfoPostFix') ?>",
"sSearch":       "<?php echo lang('sSearch') ?>",
"sUrl":          "<?php echo lang('sUrl') ?>",
"oPaginate": {
"sFirst":    "<?php echo lang('sFirst') ?>",
"sPrevious": "<?php echo lang('sPrevious') ?>",
"sNext":     "<?php echo lang('sNext') ?>",
"sLast":     "<?php echo lang('sLast') ?>"
}
}
});

Enfin dans la vue index.php, ajouter à la table le paramètre suivant :

id="flex_table"

Sources :

Paramétrage

Le fichier js.php présenté ci-dessus est un exemple d’intégration, il est possible de paramétrer différentes options :

  • l’activation de la pagination : "bPaginate",
  • le style de pagination : "sPaginationType",
  • le tri par défaut au chargement de la page : "aaSorting",
  • l’affichage des informations sur les entrées affichées : "bInfo",
  • la largeur automatique des colonnes : "bAutoWidth",
  • le tri colonne par colonne : "aoColumns" avec les options { "bSortable": false } ou null

A noter que la version de DataTables actuellement embarquée dans Bonfire est la 1.9 et que DataTables est passé en 1.10. Cela n’enlève rien au fonctionnement du plugin.

Sources

Toutes les fonctionnalités et leur options sont décrites dans la documentation de DataTables 1.9 :