Datatable Enhancements

_data/config-table.csv

@@ -3,3 +3,14 @@ title,Titel
 date,Datum
 description,Beschreibung
 subject,Themen
+era,Epochen
+relation,Verwandte Ressourcen
+isPartOf,Zugehörigkeit
+creator,Ersteller*in
+source,Quelle
+publisher,Verantwortliche Gedächtnisinstitution
+type,Typ
+format,Format
+extent,Auflösung
+language,Sprache
+rights,Rechte

_data/translations.yml

@@ -442,6 +442,14 @@ _includes:
         en: "More Exports"
         es: "Más Exportaciones"
         de: "Weitere Exporte"
+      quick_search:
+        en: "Quick Search"
+        es: "Búsqueda Rápida"
+        de: "Schnellsuche"
+      advanced_search:
+        en: "Advanced Search"
+        es: "Búsqueda Avanzada"
+        de: "Erweiterte Suche"
     timeline-js.html:
   collection-banner.html:
     featured-items:
@@ -638,6 +646,10 @@ _layouts:
       en: "Eras"
       es: "Épocas"
       de: "Epochen"
+    table:
+      en: "Table"
+      es: "Tabla"
+      de: "Tabelle"
     view-objects:
       en: "Show object view"
       de: "Zeige Objektansicht"
@@ -650,6 +662,10 @@ _layouts:
     view-eras:
       en: "Show list of eras"
       de: "Zeige Liste der Epochen"
+    view-table:
+      en: "Show collection as table"
+      es: "Mostrar colección como tabla"
+      de: "Zeige Sammlung als Tabelle"
     switch-view:
       en: "Switch view"
       es: "Cambiar Vista"

_includes/js/table-js.html

@@ -1,5 +1,11 @@
 {% assign fcount = site.data['config-table'] | size %}
 {% assign lang = site.lang %}
+{% assign quick_search = site.data.translations._includes.js['table-js.html'].quick_search[site.lang]
+  | default: 'Quick Search'
+%}
+{% assign advanced_search = site.data.translations._includes.js['table-js.html'].advanced_search[site.lang]
+  | default: 'Advanced Search'
+%}
 {% assign download_dropdown = site.data.translations._includes.js['table-js.html'].download[site.lang]
   | default: 'Download'
 %}
@@ -26,42 +32,80 @@
   /* use jquery to initialize DataTables and load collection data */
   $(document).ready( function () {
       $('#item-table').DataTable( {
-          {% if lang != "en" %}language: { url: '{{ "/assets/lib/datatables/" | append: lang | append: ".json" | relative_url }}' },{% endif %}
+        {% if lang != "en" %}language: { url: '{{ "/assets/lib/datatables/" | append: lang | append: ".json" | relative_url }}',
+            search: "",
+            searchBuilder:{ button: '{{ advanced_search }}'},
+          },{% endif %}
           // use DataTables ajax load
           ajax: { url: '{{ "/assets/js/metadata.min.json" | relative_url }}', dataSrc: 'objects' },
           // defer render to speed up large sets
           "deferRender": true,
           // enable pagination
           "paging": true,
-          "lengthMenu": [[ 25, 50, 100, -1], [ 25, 50, 100, "∞"]],
-          // add download features
-          dom: 'B<"d-flex justify-content-between align-items-center flex-nowrap mt-2"<"pagination-controls"l><"search-box"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
-          buttons: [
+          // "lengthMenu": [[ 25, 50, 100, -1], [ 25, 50, 100, "∞"]],
+          fixedHeader: true,
+          autoWidth: false,
+
+          layout: {
+            topStart: [
               {
-                  extend: 'collection',
-                  text: '{{ download_dropdown }}',
-                  className: 'btn btn-outline-primary',
-                  buttons: [
-                      {
-                          text: '{{ excel_export }}',
-                          extend: 'excelHtml5',
-                          className: 'btn btn-outline-primary'
-                      },
-                      {
-                          text: '{{ csv_export }}',
-                          extend: 'csvHtml5',
-                          className: 'btn btn-outline-primary'
-                      }
-                  ]
+                search: {
+                text: '_INPUT_',
+                placeholder: '{{ quick_search }}',
+                },
               },
               {
-                  text: '{{ more_exports }}',
-                  action: function ( e, dt, node, config ) {
-                          $('#dataModal').modal('show');
-                      },
+                buttons: [
+                {
+                  extend: 'searchBuilder',
                   className: 'btn btn-outline-primary'
-               }
-          ],
+                },
+                {
+                  extend: 'colvis',
+                  columns: ':gt(0)',
+                  className: 'btn btn-outline-primary'
+                },
+                ],
+              }
+            ],
+            topEnd: {
+              buttons: [
+                  {
+                      extend: 'collection',
+                      text: '{{ download_dropdown }}',
+                      className: 'btn btn-outline-primary',
+                      buttons: [
+                          {
+                            text: '{{ excel_export }}',
+                            extend: 'excelHtml5',
+                            className: 'btn btn-outline-primary',
+                            exportOptions: {
+                              columns: ':visible',
+                              orthogonal: 'export'
+                            }                              
+                          },
+                          {
+                            text: '{{ csv_export }}',
+                            extend: 'csvHtml5',
+                            className: 'btn btn-outline-primary',
+                            exportOptions: {
+                              columns: ':visible',
+                              orthogonal: 'export'
+                            }
+                          }
+                      ]
+                  },
+                  {
+                      text: '{{ more_exports }}',
+                      action: function ( e, dt, node, config ) {
+                              $('#dataModal').modal('show');
+                          },
+                      className: 'btn btn-outline-primary'
+                  }
+              ],
+              },
+            },
+
           // get the data from json
           columns: [ {% for i in (0..fcount) %}{ data: '{{ i }}' }{% unless forloop.last %},{% endunless %}{% endfor %} ],
           columnDefs: [
@@ -70,10 +114,61 @@
               // combine link with first column
               { "render": function ( data, type, row ) { return '<a href="' + row['{{ fcount }}'] +'">'+ data +'</a>'; },"targets": 0 },
               // hide the link column
-              { "visible": false,  "targets": [ {{ fcount }} ] }
+              { "visible": false,  "targets": [ {{ fcount }} ] },
+              // define certain columns to be hidden by default for better appearance
+              { "visible": false, "targets": [5,6,7,9,10,11,12,13] },
+              // handle keywords and eras: display as HTML, export raw text
+              {
+                "targets": [3,4], // keyword and era column IDs
+                "render": function (data, type, row) {
+                  if (!data) return '';
+
+                  const keywords = data.split(';').map(keyword => keyword.trim());
+
+                  if (type === 'display') {
+                    const links = keywords.map(keyword => {
+                      const url = `/browse.html#${encodeURIComponent(keyword)}`;
+                      return `<a href="${url}" target="_blank">${keyword}</a>`;
+                    });
+                    return links.join(', ');
+                  } else if (type === 'export') {
+                    return keywords.join(';');
+                  }
+                  return data;
+                }
+              },
+              // handle markdown links: display as HTML, export raw markdown
+              {
+                "targets": [5,7,8,9,10], // columns with markdown links
+                "render": function (data, type, row) {
+                    if (!data) return '';
+
+                    const links = data.split(';').map(link => {
+                        const match = link.match(/\[(.+?)\]\((.+?)\)/);
+                        if (match) {
+                            const label = match[1];
+                            const url = match[2];
+
+                            if (type === 'display') {
+                                return `<a href="${url}" target="_blank">${label}</a>`;
+                            } else if (type === 'export') {
+                                return `[${label}](${url})`;
+                            }
+                        }
+                        return link;
+                    });
+                    return type === 'display' ? links.join('<hr>') : links.join(';');
+                  }
+                }
           ],
           // sort based on the second column
-          order: [[ 1, "asc" ]]
+          order: [[ 1, "asc" ]],
+          initComplete: function () {
+            // hide the SearchBuilder container initially
+            $('.dtsb-searchBuilder').hide();
+            // align size of quick search bar
+            $('input[type="search"]').removeClass('form-control-sm').addClass('form-control-md');
+          }
       });
   });
 </script>

_layouts/browse.html

@@ -43,6 +43,13 @@
         >
           {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
         </a>
+        <a
+          href="{{ '/table.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-table[site.lang] | default: 'Show collection as table' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].table[site.lang] | default: 'Table' }}
+        </a>
         <button
           class="btn btn-outline-primary btn-lg"
           aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"

_layouts/cloud.html

@@ -44,6 +44,13 @@
         >
           {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
         </a>
+        <a
+          href="{{ '/table.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-table[site.lang] | default: 'Show collection as table' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].table[site.lang] | default: 'Table' }}
+        </a>
         <button
           class="btn btn-outline-primary btn-lg"
           aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"

_layouts/data.html

@@ -7,6 +7,65 @@
 
 {{ content }}
 
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
+        <a
+          href="{{ '/table.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-table[site.lang] | default: 'Show collection as table' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].table[site.lang] | default: 'Table' }}
+        </a>
+        <button
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
+        >
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% include js/switch-view-js.html %}
+
 <div class="table-responsive-md">
   <table id="item-table" class="table table-striped">
     <thead>

_layouts/list.html

@@ -62,6 +62,13 @@
         >
           {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
         </a>
+        <a
+          href="{{ '/table.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-table[site.lang] | default: 'Show collection as table' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].table[site.lang] | default: 'Table' }}
+        </a>
         <button
           class="btn btn-outline-primary btn-lg"
           aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"

_layouts/timeline_edtf.html

@@ -65,6 +65,13 @@
         >
           {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
         </a>
+        <a
+          href="{{ '/table.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-table[site.lang] | default: 'Show collection as table' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].table[site.lang] | default: 'Table' }}
+        </a>
         <button
           class="btn btn-outline-primary btn-lg"
           aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"