Datatables plugin help

Hi,
I've recently installed Grav and am trying to get to grips with it. Having problems with the Datatables plugin which looks ideal for some of the content that I want to use.

As a test I created a page with...

[datatables]
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>
[/datatables]

in the content field but all I get on the page when it is rendered on the website is the HTML code as a long string not the nice DataTables table I was expecting.

The datatables plugin in definately enabled and I don't get the [datatables] shortcode in the rendered page so it seems to be doing something but not what I expect.

Am I missing something?

@ray,

Am I missing something?

Yes you do...

• According the README of the plugin, you need to install plugin shortcode-core

  NOTE: This plugin is a modular component for Grav which requires Grav and the Error, Problems and ShortcodeCore to operate.

• The datatables plugin hasn't been updated in the last 6 years, and hence hasn't been upgraded to Grav v1.7.
  It lacks the now required |raw filter in its Twig template. It should use: {{ content | raw }}
  • Note the plugin also comes with js and css files of the jQuery plugin that are 6 years old... You might consider updating these files too.
• Btw. instead of an HTML <table> element you could also use a Markdown table.

The following works fine when following the docs and required fixes...

  [datatables]
  | Month    | Savings |
  | -------- | ------- |
  | January  | $250    |
  | February | $80     |
  | March    | $420    |
  [/datatables]

@pamtbaau,

Thank you. It was the {{ content|raw }} that was causing the problem. I had checked that Error, Problems and ShortcodeCore were installed and they all seemed to be there by default on my installation.

The thing is all I get now is a normal looking table, the same as would normally be rendered by Markdown, not a DataTables table with paging and search etc. I'm guessing I need to use [dt-script] to achieve that.

The HTML table / Markdown table was only a starting point. Eventually I want to pull a large table out of a database with [sql-table]...

[datatables]
  [sql-table]
    SELECT * FROM ringingrecords
  [/sql-table]
[/datatables]

@ray,

The thing is all I get now is a normal looking table, the same as would normally be rendered by Markdown, not a DataTables table with paging and search etc.

I cannot reproduce this issue. My example and your example are working fine.

Check if any errors have been thrown in the DevConsole.

@pamtbaau,

Oh, there is something wrong then. Silly question, where is the DevConsole? I can't see a plugin for it.

@ray, Sorry, I meant the DevTools of the browser...

Hi @pamtbaau,

Ok thanks, I see. No there are no errors in the browser development tools as far as I can see. The browser is just seeing a normal html table.

I'm wondering if it is the out of date JQuery plugin js or css files that you mentioned but again, I can't see a JQuery plugin either installed on my system or available to add. How do I update it?

There is a jquery-3.x.min.js file in system/assets with

/*! jQuery v3.6.4 | (c) OpenJS Foundation and other contributors | jquery.org/license */ 

on the first line. v3.6.4 seems to be from March 2023.

@ray, Well, using a vanilla fresh Grav v1.7 installation, it works when applying above mentioned fixes...

Only you can tell the difference between my setup and yours.

Try a fresh vanilla install and see if it works. Then add your customisations one by one...

@pamtbaau, Thanks for your help. I changed the theme and it started working. Got to figure out how to get it to do what I want now.

The theme that didn't work was the Digital Scholarship theme seemingly because jQuery isn't defined in it.

@ray,

No there are no errors in the browser development tools as far as I can see.

Yes there are... Theme Digital Scholarship does throw the errors I've shown above.

Yes I'm sorry. I don't use the Dev Console very much so I'm not that familiar with it. I was probably looking in the wrong place. I'll know better next time. Thanks.