Merge pull request #292 from ELIXIR-Belgium/datatable-query

Add searchBuilder option for DataTables

_config.yml

@@ -66,6 +66,8 @@ theme_variables:
   #   edit_me: true
   #   open_issue: true
   #   history: true
+  # datatables:
+  #   searchbuilder: True
   # headings:
   #   related-pages: Related pages
   #   more-information-tiles: More information

_includes/head.html

@@ -62,13 +62,25 @@
     <link rel="stylesheet" type="text/css" href="{{ 'assets/css/dataTables.bootstrap5.min.css' | relative_url }}">
     <script type="text/javascript" charset="utf8" src="{{ 'assets/js/jquery.dataTables.min.js' | relative_url }}"></script>
     <script type="text/javascript" charset="utf8" src="{{ 'assets/js/dataTables.bootstrap5.min.js' | relative_url }}"></script>
+    {%- if site.theme_variables.datatables.searchbuilder %}
+    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/dataTables.dateTime.min.css' | relative_url }}">
+    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/searchBuilder.bootstrap5.min.css' | relative_url }}">
+    <script type="text/javascript" charset="utf8" src="{{ 'assets/js/dataTables.searchBuilder.min.js' | relative_url }}"></script>
+    <script type="text/javascript" charset="utf8" src="{{ 'assets/js/dataTables.dateTime.min.js' | relative_url }}"></script>
+    <script type="text/javascript" charset="utf8" src="{{ 'assets/js/searchBuilder.bootstrap5.min.js' | relative_url }}"></script>
+    {%- endif %}
     <script type="text/javascript">
         $(document).ready(function () {
             $('table.display').each(function() {
                 $(this).DataTable({
                     lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                     stateSave: true,
                     searching: true,
+                    {%- if site.theme_variables.datatables.searchbuilder %}
+                    layout: {
+                        top1Start: 'searchBuilder'
+                    },
+                    {%- endif %}
                     info: true,
                     pageLength: 10,
                     language: {
@@ -82,7 +94,7 @@
                             $('#'+tableId+'_wrapper .dt-search').hide();
                             $('#'+tableId+'_wrapper .dt-info').hide();
                         }
-                        $('.dt-layout-full').addClass('table-responsive');
+                        $('.dt-layout-table .dt-layout-full').addClass('table-responsive');
                     }
                 });
             })

pages/documentation/configuring_theme.md

@@ -52,6 +52,8 @@ theme_variables:
     edit_me: true
     open_issue: true
     history: true
+  datatables:
+    searchbuilder: False
   headings:
     related-pages: Related pages
     more-information-tiles: More information
@@ -83,6 +85,8 @@ More detailed information about these settings can be found here:
   * `edit_me`: Enable the 'propose an edit on this page' button.
   * `open_issue`: Enable the 'open an issue on this page' button.
   * `history`: Enable the 'history of this page' button.
+* **datatables**: Settings related to the DataTables JS library
+  * `searchbuilder`: SearchBuilder provides the end user with an easy to use UI for them to create their own complex custom search expression for a DataTable. Default: False.
 * **headings**: Change the subtitles or collapse the page sections that are automatically generated
     `related-pages`: Default: Related pages
     `more-information-tiles`:  Default: More information