{"id":18513397,"url":"https://github.com/jbox-web/ajax-datatables-rails-sample-project","last_synced_at":"2025-04-09T06:33:17.418Z","repository":{"id":38323482,"uuid":"316363966","full_name":"jbox-web/ajax-datatables-rails-sample-project","owner":"jbox-web","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-10T00:36:32.000Z","size":750,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T00:11:20.500Z","etag":null,"topics":["datatables","jquery","jquery-datatables","rails","ruby"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbox-web.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-27T00:30:52.000Z","updated_at":"2024-12-17T08:01:29.000Z","dependencies_parsed_at":"2022-08-25T02:21:21.253Z","dependency_job_id":null,"html_url":"https://github.com/jbox-web/ajax-datatables-rails-sample-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbox-web%2Fajax-datatables-rails-sample-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbox-web%2Fajax-datatables-rails-sample-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbox-web%2Fajax-datatables-rails-sample-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbox-web%2Fajax-datatables-rails-sample-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbox-web","download_url":"https://codeload.github.com/jbox-web/ajax-datatables-rails-sample-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247993126,"owners_count":21030037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatables","jquery","jquery-datatables","rails","ruby"],"created_at":"2024-11-06T15:38:01.712Z","updated_at":"2025-04-09T06:33:12.398Z","avatar_url":"https://github.com/jbox-web.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ajax-datatables-rails sample project\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n\n## Install\n\n```sh\nnicolas$ git clone https://github.com/jbox-web/ajax-datatables-rails-sample-project.git\nnicolas$ cd ajax-datatables-rails-sample-project\nnicolas$ bin/bundle install\nnicolas$ bin/yarn install\nnicolas$ bin/rails db:migrate\nnicolas$ bin/rails db:seed\nnicolas$ bin/rails s\n```\n\nOpen your web browser on http://127.0.0.1:3000. (On the first request Rails will trigger Webpack assets compilation so be patient.)\n\n## Workflow\n\n1. the [view](/app/views/posts/_datatable.html.haml) generate the HTML to render the datatable thanks to a [presenter](/app/presenters/data_table_presenter.rb) and a bunch of [helpers](/app/helpers/common/data_tables_helper.rb) methods. This HTML embeds datatable configuration in JSON format thanks to HTML5 data attributes.\n2. [datatables-factory](https://github.com/jbox-web/datatables-factory) reads this JSON config to find and instantiate [this JS class](https://github.com/jbox-web/ajax-datatables-rails-sample-project/blob/master/app/frontend/assets/javascripts/my_app/datatables/posts_datatable.coffee). (loaded by [webpacker](https://github.com/jbox-web/ajax-datatables-rails-sample-project/blob/master/app/frontend/packs/application.coffee))\n3. then it goes in the [router](/config/routes.rb)\n4. then in the [controller](/app/controllers/posts_controller.rb)\n5. then it the [datatable](/app/datatables/posts_datatable.rb)\n\n\nThis is the generated html :\n\n```html\n\u003ctable width=\"100%\" class=\"table table-striped table-bordered display responsive no-wrap\" id=\"posts-datatable\" data-toggle=\"datatable\" data-dtf-loader=\"\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth class=\"check_box\"\u003e\u003cinput type=\"checkbox\" name=\"posts-datatable-select_all\" id=\"posts-datatable-select_all\" value=\"1\" title=\"Tout cocher/Tout décocher\" /\u003e\u003c/th\u003e\n      \u003cth class=\"name colvis\"\u003eName\u003c/th\u003e\n      \u003cth class=\"title colvis\"\u003eTitle\u003c/th\u003e\n      \u003cth class=\"rooms colvis\"\u003eRooms\u003c/th\u003e\n      \u003cth class=\"enabled_s colvis\"\u003eEnabled s\u003c/th\u003e\n      \u003cth class=\"enabled_m colvis\"\u003eEnabled m\u003c/th\u003e\n      \u003cth class=\"created_at colvis\"\u003eCreated at\u003c/th\u003e\n      \u003cth class=\"updated_at colvis\"\u003eUpdated at\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody class=\"context-menu\"\u003e\u003c/tbody\u003e\n\u003c/table\u003e\n```\n\nThis is the generated json embeds in `data-dtf-loader` (the one above is empty for clarity) :\n\n```json\n{\n  \"dt_id\": \"#posts-datatable\",\n  \"dt_class\": \"Datatables.PostsDatatable\",\n  \"dt_options\":\n  {\n    \"language\":\n    {\n      \"processing\": \"Traitement en cours...\",\n      \"search\": \"Rechercher\\u0026nbsp;:\",\n      \"lengthMenu\": \"Afficher _MENU_ éléments\",\n      \"info\": \"Affichage de l\u0026#39;élément _START_ à _END_ sur _TOTAL_ éléments\",\n      \"infoEmpty\": \"Affichage de l\u0026#39;élément 0 à 0 sur 0 éléments\",\n      \"infoFiltered\": \"(filtré de _MAX_ éléments au total)\",\n      \"infoPostFix\": \"\",\n      \"loadingRecords\": \"Chargement en cours...\",\n      \"zeroRecords\": \"Aucun élément à afficher\",\n      \"emptyTable\": \"Aucune donnée disponible dans le tableau\",\n      \"paginate\":\n      {\n        \"first\": \"Premier\",\n        \"previous\": \"Précédent\",\n        \"next\": \"Suivant\",\n        \"last\": \"Dernier\"\n      },\n      \"aria\":\n      {\n        \"sortAscending\": \": activer pour trier la colonne par ordre croissant\",\n        \"sortDescending\": \": activer pour trier la colonne par ordre décroissant\"\n      },\n      \"select\":\n      {\n        \"rows\": \"%d lignes sélectionnée(s)\"\n      },\n      \"buttons\":\n      {\n        \"pageLength\":\n        {\n          \"_\": \"Afficher %d éléments\",\n          \"-1\": \"Montre tout\"\n        }\n      }\n    },\n    \"columns\": [\n    {\n      \"className\": \"check_box\",\n      \"visible\": true,\n      \"orderable\": false,\n      \"searchable\": false,\n      \"width\": \"\",\n      \"data\": \"check_box\",\n      \"name\": \"Select All\"\n    },\n    {\n      \"className\": \"name colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"name\",\n      \"name\": \"Name\"\n    },\n    {\n      \"className\": \"title colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"title\",\n      \"name\": \"Title\"\n    },\n    {\n      \"className\": \"rooms colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"rooms\",\n      \"name\": \"Rooms\"\n    },\n    {\n      \"className\": \"enabled_s colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"enabled_s\",\n      \"name\": \"Enabled s\"\n    },\n    {\n      \"className\": \"enabled_m colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"enabled_m\",\n      \"name\": \"Enabled m\"\n    },\n    {\n      \"className\": \"created_at colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"created_at\",\n      \"name\": \"Created at\"\n    },\n    {\n      \"className\": \"updated_at colvis\",\n      \"visible\": true,\n      \"orderable\": true,\n      \"searchable\": true,\n      \"width\": \"\",\n      \"data\": \"updated_at\",\n      \"name\": \"Updated at\"\n    }],\n    \"buttons\": [\n    {\n      \"url\": \"/posts/select_all\",\n      \"action\": \"select_all\",\n      \"method\": \"post\",\n      \"text\": \"\\u003ci class=\\\"far fa-check-square\\\"\\u003e\\u003c/i\\u003e\",\n      \"titleAttr\": \"Tout sélectionner\",\n      \"button_name\": \"select_all\"\n    },\n    {\n      \"url\": \"/posts/reset_selection\",\n      \"action\": \"reset_selection\",\n      \"method\": \"post\",\n      \"text\": \"\\u003ci class=\\\"far fa-square\\\"\\u003e\\u003c/i\\u003e\",\n      \"titleAttr\": \"Réinitialiser la sélection\",\n      \"button_name\": \"reset_selection\"\n    },\n    {\n      \"action\": \"reset_filters\",\n      \"text\": \"\\u003ci class=\\\"fas fa-sync-alt\\\"\\u003e\\u003c/i\\u003e\",\n      \"titleAttr\": \"Réinitialiser tous les filtres\",\n      \"button_name\": \"reset_filters\"\n    },\n    {\n      \"action\": \"apply_default_filters\",\n      \"text\": \"\\u003ci class=\\\"fas fa-filter\\\"\\u003e\\u003c/i\\u003e\",\n      \"titleAttr\": \"Appliquer les filtres par défaut\",\n      \"button_name\": \"apply_default_filters\"\n    },\n    {\n      \"extend\": \"colvis\",\n      \"columns\": \".colvis\",\n      \"text\": \"\\u003ci class=\\\"fas fa-table\\\"\\u003e\\u003c/i\\u003e\",\n      \"titleAttr\": \"Visibilité des colonnes\",\n      \"button_name\": \"columns\"\n    }],\n    \"filters\": [\n    {\n      \"filter_type\": \"select\",\n      \"filter_plugin\": \"select2\",\n      \"filter_plugin_options\":\n      {\n        \"minimumResultsForSearch\": \"-1\"\n      },\n      \"filter_container_id\": \"posts-enabled-s-filter\",\n      \"filter_default_label\": \"Filtrer par statut\",\n      \"column_id\": 4\n    },\n    {\n      \"filter_type\": \"multi_select\",\n      \"filter_plugin_options\":\n      {\n        \"width\": \"element\",\n        \"minimumResultsForSearch\": \"-1\"\n      },\n      \"filter_plugin\": \"select2\",\n      \"filter_container_id\": \"posts-enabled-m-filter\",\n      \"filter_default_label\": \"Filtrer par statut\",\n      \"column_id\": 5\n    },\n    {\n      \"filter_type\": \"text\",\n      \"filter_container_id\": \"posts-name-filter\",\n      \"filter_default_label\": \"Filtrer par nom\",\n      \"column_id\": 1\n    },\n    {\n      \"filter_plugin\": \"jquery-ui\",\n      \"filter_plugin_options\":\n      {\n        \"changeMonth\": true,\n        \"changeYear\": true,\n        \"dateFormat\": \"dd/mm/yy\"\n      },\n      \"filter_delay\": 2000,\n      \"filter_type\": \"range_date\",\n      \"filter_container_id\": \"posts-created-at-filter\",\n      \"filter_default_label\": [\"date de début\", \"date de fin\"],\n      \"column_id\": 6\n    },\n    {\n      \"filter_plugin\": \"jquery-ui\",\n      \"filter_plugin_options\":\n      {\n        \"changeMonth\": true,\n        \"changeYear\": true,\n        \"dateFormat\": \"dd/mm/yy\"\n      },\n      \"filter_delay\": 2000,\n      \"filter_type\": \"range_date\",\n      \"filter_container_id\": \"posts-updated-at-filter\",\n      \"filter_default_label\": [\"date de début\", \"date de fin\"],\n      \"column_id\": 7\n    },\n    {\n      \"filter_delay\": 1000,\n      \"filter_type\": \"range_number\",\n      \"filter_container_id\": \"posts-rooms-filter\",\n      \"filter_default_label\": [\"Min.\", \"Max.\"],\n      \"column_id\": 3\n    }],\n    \"filters_applied\": [\n    {\n      \"column_id\": 4,\n      \"value\": \"1\"\n    },\n    {\n      \"column_id\": 5,\n      \"value\": [\"0\", \"1\"]\n    },\n    {\n      \"column_id\": 1,\n      \"value\": \"name 1\"\n    }],\n    \"source\": \"/posts/datatable.json\",\n    \"dom\": \"\\u003c\\\"html5buttons\\\"B\\u003elr\\u003c\\\"clearfix\\\"\\u003e\\u003c\\\"dataTables_info selected-count-wrapper \\\"\\u003c\\\".selected-count\\\"\\u003e\\u003e\\u003c\\\"\\\" i\\u003etp\",\n    \"select\":\n    {\n      \"style\": \"multi\"\n    },\n    \"order\": [\n      [2, \"asc\"]\n    ]\n  },\n  \"dtf_options\":\n  {\n    \"env\": \"development\",\n    \"debug_log\": true,\n    \"debug_dump\": false,\n    \"context_menu\": true\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbox-web%2Fajax-datatables-rails-sample-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbox-web%2Fajax-datatables-rails-sample-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbox-web%2Fajax-datatables-rails-sample-project/lists"}