Implementing Ajax function and sorting with datatables

5

@Baluga145, I did some research on datatables.net and couldn’t find anything resembling your code. Then I realised you are using the Grav plugin ‘datatables’ which adds a shortcode to add the jQuery plugin ‘datatables’ to a page…

The plugin is already a bit dated and I couldn’t get it to work out of the box. I needed to alter a Twig template of the plugin.

The following steps will create you a working datatable populated with data from an Ajax request:

  • Create a fresh Grav installation

  • Add the plugins ‘datatables’ and ‘shortcode-core’ using:

    $ bin/gpm install shortcode-core
$ bin/gpm install datatables

  • Create page ‘03.datatables/default.md’:

    /user/pages/
├── 01.home
│   └── default.md
├── 02.typography
│   └── default.md
├── 03.datatables
│   └── default.md
└── data
   └── data.md

    The page ‘03.datatables/default.md’ contains the following:

    ---
title: DataTables
---
[datatables]
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Firma</th>
      <th>Name</th>
      <th>Sitzungszimmer</th>
      <th>Uhrzeit</th>
      <th>Datum</th>
    </tr>
  </thead>
</table>
[dt-script]
  $('#example').DataTable( {
    // Replace the ajax call with your own data source
    ajax: "http://localhost/grav/site-dev/data.json",
    columns: [
      { "data": "Firma" },
      { "data": "Name" },
      { "data": "Sitzungszimmer" },
      { "data": "Uhrzeit" },
      { "data": "Datum" }
    ],
    paging: false,
    ordering: false,
    info: false,
    searching: false
  });
[/dt-script]
[/datatables]

    The page ‘data.md’ contains the data for my ajax request. The ajax request to http://localhost/grav/site-dev/data.json will return the following json data:

    {
  "data": [
    {
      "Firma": "Tiger Nixon",
      "Name": "System Architect",
      "Sitzungszimmer": "Edinburgh",
      "Uhrzeit": "5421",
      "Datum": "2011/04/25"
    }
  ]
}

    Notes:

    • http://assets.bunzl.ch/BrightSign/datatables.txt returns invalid json data. $('#example').DataTable() will fail because of that.
    • If your website is not on the same domain as ‘assets.bunzl.ch’ you will probably run into ‘cross-origin’ errors preventing you from accessing the data.

  • As said, I couldn’t get the plugin ‘datatables’ to work out of the box. I had to change its template ‘datatables.html.twig’.
    Before you can do this, you will have to create a child theme as described in the documentation on Theme Inheritance

  • In your new child theme (called ‘mytheme’ hereafter), copy file ‘/user/plugins/datatables/templates/partials/datatables.html.twig’ into ‘user/themes/mytheme/templates/partials/’. Replace the content with the following code:

    {{ content }}
<script>
$(document).ready( function () {
    {% if snippet %}
      {{ snippet }}
    {% endif %}
} );
</script>

  • If you now open page ‘datatables’ in the browser, you should see something similar to this:
    image

Hope this helps…

1 Like