nicolas$ git clone https://github.com/jbox-web/ajax-datatables-rails-sample-project.git nicolas$ cd ajax-datatables-rails-sample-project nicolas$ bin/bundle install nicolas$ bin/yarn install nicolas$ bin/rails db:migrate nicolas$ bin/rails db:seed nicolas$ bin/rails sOpen your web browser on http://127.0.0.1:3000. (On the first request Rails will trigger Webpack assets compilation so be patient.)
- the view generate the HTML to render the datatable thanks to a presenter and a bunch of helpers methods. This HTML embeds datatable configuration in JSON format thanks to HTML5 data attributes.
- datatables-factory reads this JSON config to find and instantiate this JS class. (loaded by webpacker)
- then it goes in the router
- then in the controller
- then it the datatable
This is the generated html :
<table width="100%" class="table table-striped table-bordered display responsive no-wrap" id="posts-datatable" data-toggle="datatable" data-dtf-loader=""> <thead> <tr> <th class="check_box"><input type="checkbox" name="posts-datatable-select_all" id="posts-datatable-select_all" value="1" title="Tout cocher/Tout décocher" /></th> <th class="name colvis">Name</th> <th class="title colvis">Title</th> <th class="rooms colvis">Rooms</th> <th class="enabled_s colvis">Enabled s</th> <th class="enabled_m colvis">Enabled m</th> <th class="created_at colvis">Created at</th> <th class="updated_at colvis">Updated at</th> </tr> </thead> <tbody class="context-menu"></tbody> </table>This is the generated json embeds in data-dtf-loader (the one above is empty for clarity) :
{ "dt_id": "#posts-datatable", "dt_class": "Datatables.PostsDatatable", "dt_options": { "language": { "processing": "Traitement en cours...", "search": "Rechercher\u0026nbsp;:", "lengthMenu": "Afficher _MENU_ éléments", "info": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments", "infoEmpty": "Affichage de l'élément 0 à 0 sur 0 éléments", "infoFiltered": "(filtré de _MAX_ éléments au total)", "infoPostFix": "", "loadingRecords": "Chargement en cours...", "zeroRecords": "Aucun élément à afficher", "emptyTable": "Aucune donnée disponible dans le tableau", "paginate": { "first": "Premier", "previous": "Précédent", "next": "Suivant", "last": "Dernier" }, "aria": { "sortAscending": ": activer pour trier la colonne par ordre croissant", "sortDescending": ": activer pour trier la colonne par ordre décroissant" }, "select": { "rows": "%d lignes sélectionnée(s)" }, "buttons": { "pageLength": { "_": "Afficher %d éléments", "-1": "Montre tout" } } }, "columns": [ { "className": "check_box", "visible": true, "orderable": false, "searchable": false, "width": "", "data": "check_box", "name": "Select All" }, { "className": "name colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "name", "name": "Name" }, { "className": "title colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "title", "name": "Title" }, { "className": "rooms colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "rooms", "name": "Rooms" }, { "className": "enabled_s colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "enabled_s", "name": "Enabled s" }, { "className": "enabled_m colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "enabled_m", "name": "Enabled m" }, { "className": "created_at colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "created_at", "name": "Created at" }, { "className": "updated_at colvis", "visible": true, "orderable": true, "searchable": true, "width": "", "data": "updated_at", "name": "Updated at" }], "buttons": [ { "url": "/posts/select_all", "action": "select_all", "method": "post", "text": "\u003ci class=\"far fa-check-square\"\u003e\u003c/i\u003e", "titleAttr": "Tout sélectionner", "button_name": "select_all" }, { "url": "/posts/reset_selection", "action": "reset_selection", "method": "post", "text": "\u003ci class=\"far fa-square\"\u003e\u003c/i\u003e", "titleAttr": "Réinitialiser la sélection", "button_name": "reset_selection" }, { "action": "reset_filters", "text": "\u003ci class=\"fas fa-sync-alt\"\u003e\u003c/i\u003e", "titleAttr": "Réinitialiser tous les filtres", "button_name": "reset_filters" }, { "action": "apply_default_filters", "text": "\u003ci class=\"fas fa-filter\"\u003e\u003c/i\u003e", "titleAttr": "Appliquer les filtres par défaut", "button_name": "apply_default_filters" }, { "extend": "colvis", "columns": ".colvis", "text": "\u003ci class=\"fas fa-table\"\u003e\u003c/i\u003e", "titleAttr": "Visibilité des colonnes", "button_name": "columns" }], "filters": [ { "filter_type": "select", "filter_plugin": "select2", "filter_plugin_options": { "minimumResultsForSearch": "-1" }, "filter_container_id": "posts-enabled-s-filter", "filter_default_label": "Filtrer par statut", "column_id": 4 }, { "filter_type": "multi_select", "filter_plugin_options": { "width": "element", "minimumResultsForSearch": "-1" }, "filter_plugin": "select2", "filter_container_id": "posts-enabled-m-filter", "filter_default_label": "Filtrer par statut", "column_id": 5 }, { "filter_type": "text", "filter_container_id": "posts-name-filter", "filter_default_label": "Filtrer par nom", "column_id": 1 }, { "filter_plugin": "jquery-ui", "filter_plugin_options": { "changeMonth": true, "changeYear": true, "dateFormat": "dd/mm/yy" }, "filter_delay": 2000, "filter_type": "range_date", "filter_container_id": "posts-created-at-filter", "filter_default_label": ["date de début", "date de fin"], "column_id": 6 }, { "filter_plugin": "jquery-ui", "filter_plugin_options": { "changeMonth": true, "changeYear": true, "dateFormat": "dd/mm/yy" }, "filter_delay": 2000, "filter_type": "range_date", "filter_container_id": "posts-updated-at-filter", "filter_default_label": ["date de début", "date de fin"], "column_id": 7 }, { "filter_delay": 1000, "filter_type": "range_number", "filter_container_id": "posts-rooms-filter", "filter_default_label": ["Min.", "Max."], "column_id": 3 }], "filters_applied": [ { "column_id": 4, "value": "1" }, { "column_id": 5, "value": ["0", "1"] }, { "column_id": 1, "value": "name 1" }], "source": "/posts/datatable.json", "dom": "\u003c\"html5buttons\"B\u003elr\u003c\"clearfix\"\u003e\u003c\"dataTables_info selected-count-wrapper \"\u003c\".selected-count\"\u003e\u003e\u003c\"\" i\u003etp", "select": { "style": "multi" }, "order": [ [2, "asc"] ] }, "dtf_options": { "env": "development", "debug_log": true, "debug_dump": false, "context_menu": true } }