Example of using the datatables pattern

The datatables pattern (shipped with Plone 5.1.4) is great but the configuration is not supereasy. So I'll just put this out there for those how want to use it.

What works nicely are simple things like pageLength or pagingType. You can set that directly as a string

data-pat-datatables="pageLength: 50; pagingType: simple"

For nested config options like translations it get's a little more complicated, since you need to pass the nested config as json and that requires to have the double-quotes inside the json! Here is a full example that I used for a small project:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      i18n:domain="bgrci.asbest"
      metal:use-macro="context/main_template/macros/master">
 
<metal:content-core fill-slot="content-core">
<metal:block define-macro="content-core">
 
  <metal:listingmacro define-macro="listing">
  <tal:results define="items view/results">
 
        <table 
            class="listing pat-datatables"
            data-pat-datatables='{
              "pageLength": 50,
              "pagingType": "simple_numbers",
              "language": {
                  "processing": "Bitte warten...",
                  "lengthMenu": "_MENU_ Einträge anzeigen",
                  "zeroRecords": "Keine Einträge vorhanden.",
                  "info": "_START_ bis _END_ von _TOTAL_ Einträgen",
                  "infoEmpty": "Keine Einträge",
                  "infoFiltered": "(gefiltert von _MAX_ Einträgen)",
                  "infoPostFix": "",
                  "search": "Filtern",
                  "url": "",
                  "paginate": {
                      "first":    "Erster",
                      "previous": "Zurück",
                      "next":     "Weiter",
                      "last":     "Letzter"
                   }}}'
            id="asbest_table">
            <thead>
                <tr>
                    <th i18n:translate="">#</th>
                    <th i18n:translate="">Bezeichnung</th>
                    <th i18n:translate="">Produktart</th>
                    <th i18n:translate="">Produktgruppe</th>
                    <th i18n:translate="">Hersteller</th>
                    <th i18n:translate="">Asbestgehalt</th>
 
                </tr>
            </thead>
            <tbody>
 
            <tal:entries tal:repeat="item items">
 
                <tr>
                    <td tal:content="repeat/item/number">Nummer</td>
                    <td>
                      <a href="${item/getURL}"
                         tal:attributes="title item/Description"
                         tal:content="item/Title">
                         Bezeichnung
                      </a>
                    </td>
                    <td tal:content="item/product_type | nothing">Produktart</td>
                    <td tal:content="item/product_group | nothing">Produktgruppe</td>
                    <td tal:content="item/product_creator | nothing">Hersteller</td>
                    <td tal:content="item/percentage | nothing">Asbestgehalt</td>
                </tr>
 
            </tal:entries>
          </tbody>
        </table>
 
  </tal:results>
  </metal:listingmacro>
  
</metal:block>
</metal:content-core>
 
</html>
6 Likes