Implementing Ajax function and sorting with datatables

@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:

  BASHCopy

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

• Create page '03.datatables/default.md':

  TXTCopy

  /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:

  HTMLCopy

  ---
  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:

  JSONCopy

  {
  "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:

  TWIGCopy

  {{ 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:
  

Hope this helps...