Datatables

La gestion des tableaux dynamiques dans l'application web du Festival-Concours de Musique de Sherbrooke est supportée par le gem jquery-datatables-rails (voir la documentation). Ce gem est en fait une encapsulation de DataTables.net (voir la documentation).

Pour ajouter, modifier ou supprimer des données dans une table, sauter à la section Configuration de datatables.

Utilisation de DataTables

L'utilisation est bien simple et très intuitive. Voici ce qui est supporté pour l'instant:

• Trier par colonne : Il s'agit simplement de cliquer sur le colonne pour faire un tri en ordre croissant ou décroissant
• Recherche dans le tableau: Puisque les tableaux peuvent être gros, il est possible de rechercher. Il s'agit d'entre ce que l'on recherche dans le champ Rechercher
• Pagination: Nous avons un support avancé pour la pagination. Il s'agit simplement de choisir la page que l'on veut consulter.
• Nombre d'éléments à afficher: La liste déroulante en haut nous permet de choisir le nombre d'éléments que l'on veut afficher.

Voici les principaux avantages d'avoir un gem pour la gestion des tableaux. Il est aussi important de mentionner qu'il s'intègre très bien à Bootstrap.

Ajout/modification/suppression de données

• Ajout: Pour ajouter, il faut appuyer sur le bouton Nouveau. Une page modale va apparaître avec les champs que l'on doit remplir. On écrit ce que l'on veut comme nouvelle valeur et on clique sur Enregistrer.
• Modifier: Ce mode entre en jeu lorsque l'on sélectionne une ligne et que l'on double clique. Les informations déjà existantes seront donc populées dans le formulaire. On peut donc modifier ce que l'on veut et ensuite, on appuie sur Enregistrer. Il est aussi possible d'y accéder en cliquant sur une ligne et en appuyant sur le bouton Modifier.
• Supprimer: Comme pour modifier, on doit sélectionner une ligne du table, ensuite on appui sur Supprimer.

Sans Javascript, il est possible d'ajouter des données. Toutefois, il est impossible de modifier et supprimer des données pour l'instant puisque ces chemins réagissent aux requêtes AJAX.

Configuration de datatables

Conventions over Configurations

J'ai adopté une approche Conventions over Configurations pour cette partie. Donc, pour que tout fonctionne il faut:

• Avoir une tableau
• L'en-tête du tableau doit être encadré d'un <thead>
• Doit avoir une colonne ID au début
• Avoir un formulaire
• Doit avoir le champ ID, préférablement désactivé
• Les champs dans le formulaire doit être obligatoirement dans le même ordre que ceux du tableau

Configurations manuelles

On peut aussi le configurer à la main. Toutefois, il faut faire attention aux points suivants:

• Traduction en français
• Flèche pour filtrer à recolorer pour le branding
• Injecter les boutons Ajouter et Supprimer
• Ajouter des click handler
• Interagir avec la grille lors de succès ou réussite
• Empêcher certains comportements étranges comme le retour en haut lors de l'ajout

Remote dataTables

Pour les tables qui contiennent beaucoup de lignes > 150, nous avons utilisé des tables qui prennent leurs données de des requêtes Ajax.

Côté Serveur

Il faut utiliser le gem ajax-datatables-rails qui implémente le protocole définit par DataTables.net Server-Side Processing. Il faut donc générer la classe à l'aide de la commande rails generate ajaxdatatable User

Ensuite, on doit modifier cette classe voici un exemple:

Needed by ajax-dataTables gem. Will respond and send information to populate users dataTables

class UsersDatatable < AjaxDatatablesRails

  ##
  # Constructor to get information needed to create subset of users table
  def initialize(view)
    @model_name = User
    @columns = ["users.id", "users.last_name", "users.first_name", "users.email", "users.confirmed_at", "users.created_at", "users.updated_at"]
    @searchable_columns = ["users.id", "users.first_name", "users.last_name", "users.email"]
    super(view)
  end

private
    ##
    # Get all the fields
    def data
      users.map do |user|
        [
          user.id,
          user.last_name,
          user.first_name,
          user.email,
          user.confirmed_at ? "oui": "non",
          user.created_at.strftime("%d/%m/%Y"),
          user.updated_at.strftime("%d/%m/%Y")
        ]
      end
    end

    ##
    # Post-process data
    def users
      @users ||= fetch_records
    end

    ##
    # Pre-process data
    def get_raw_records
      User
    end

    ##
    # Get the count of rows in the query
    def get_raw_record_count
      search_records(get_raw_records).count
    end

    # ==== Insert 'presenter'-like methods below if necessary
end

Côté Client

Pour s'y faire, il faut injecter des options de plus lors de l'initialisation de la table

var tsDTOptions = {
     "bInfo": false,
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": $('#users-table').data('source'), // Url qui retourne du json
     fnDrawCallback": function( oSettings ) {
     // Add a click handler to the rows (selectable rows)
     $.each(oTable.fnGetNodes(), function() {
       $(this).single_double_click(fcms.fnSelectableRows, fcms.fnEditableRows); // Click handler sur chaque nouvelle ligne
     });
   }
};

Pour le reste, la librairie DataTables s'en charge!