I fixed the plugin :D

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Datatables
-version: 1.0.4
+version: 1.0.5
 description: shortcode to embed DataTables jquery plugin
 icon: plug
 author:
@@ -12,7 +12,9 @@ docs: https://github.com/finanalyst/grav-plugin-datatables/blob/master/README.md
 license: MIT
 
 dependencies:
-  - shortcode-core
+  - { name: shortcode-core, tested: "5.1.3" }
+  - { name: error, tested: "1.8.0" }
+  - { name: problems, tested: "2.1.1" }
 
 form:
   validation: strict

shortcodes/DataTablesScript.php

@@ -6,14 +6,14 @@ class DataTablesScript extends Shortcode
 {
   public function init()
   {
-    $this->shortcode->getHandlers()->add('dt-script', function(ShortcodeInterface $sc) {
+    $this->shortcode->getHandlers()->add('dt-script', function (ShortcodeInterface $sc) {
       $content = trim($sc->getContent());
-      while ( preg_match('/\<[^>]*\>/', $content, $matches))  { // strip tags from both ends
+      while (preg_match('/\<[^>]*\>/', $content, $matches)) { // strip tags from both ends
         $tag = strlen($matches[0]);
         $len = strlen($content);
-        $content = substr($content,$tag,$len-$tag-$tag-1);
+        $content = substr($content, $tag, $len - $tag - $tag - 1);
       }
-      if ( isset($this->grav['datatables'] )) $this->grav['datatables'] .= $content;
+      if (isset($this->grav['datatables'])) $this->grav['datatables'] .= $content;
       return '';
     });
   }

shortcodes/DataTablesShortcode.php

@@ -1,63 +1,67 @@
 <?php
+
 namespace Grav\Plugin\Shortcodes;
+
 use Thunder\Shortcode\Shortcode\ShortcodeInterface;
 use Grav\Common\Utils;
 
 class DataTablesShortcode extends Shortcode
 {
   public function init()
   {
-    $this->shortcode->getHandlers()->add('datatables', function(ShortcodeInterface $sc) {
+    $this->shortcode->getHandlers()->add('datatables', function (ShortcodeInterface $sc) {
       $content = $sc->getContent();
       $parameters = $sc->getParameters();
       $id = '';
-      $res = preg_match('/\<table[^>]*?\>(.*)\<\/table[^>]*\>/ims',$content);
-      // does table have a table attached?
-      if ( $res === FALSE or $res == 0) {
-        // error some where
-        return $this->twig->processTemplate('partials/datatables-error.html.twig',
-        [ 'message' => 'Shortcode content does not appear to have a valid &lt;table&gt;...&lt;/table&gt; element. Got instead:',
-          'content' => $content
-        ] );
-      } else {
-        $res = preg_match('/(\<table\s[^>]*)id="(.*?)"(.*\>)/ims',$content,$matches);
-        if ( $res == 1 ) {
-          $this->grav['debugger']->addMessage('found id');
-          if ( ! $matches[2] || preg_match( '/\s/',$matches[2]) == 1 ) {
-            // id either has spaces - illegal - or is null, so strip output
-            $content = $matches[1] . $matches[3];
-          } else {
-              $id = $matches[2];
-            }
-          }
+
+      $hasTable = preg_match('/\<table[^>]*?\>(.*)\<\/table[^>]*\>/ims', $content);
+      if ($hasTable === FALSE or $hasTable == 0) {
+        return $this->twig->processTemplate(
+          'partials/datatables-error.html.twig',
+          [
+            'message' => 'Shortcode content does not appear to have a valid &lt;table&gt;...&lt;/table&gt; element. Got instead:',
+            'content' => $content
+          ]
+        );
       }
-      if ( ! $id ) {
-        if ( isset( $params['grav-id'])) {
-            $id = trim($params['grav-id']);
-            unset($params['grav-id']);
-            if (preg_match('/\s/')) { $id = '';} // ignore an illegal id
-        }
-        // this occurs if content has <table without an id, or an illegal id has be stripped out
-        if (! $id ) $id = Utils::generateRandomString(10);
-        $pos = stripos('<table', $content);
-        $end = substr($content,7);
-        $content = substr_replace($content," id=\"$id\" ",7) . $end;
+
+      // Get id from html and remove the id attribute
+      $hasIdAttribute = preg_match('/(\<table\s[^>]*)id="(.*?)"(.*\>)/ims', $content, $matches);
+      if ($hasIdAttribute == 1) {
+        $content = $matches[1] . $matches[3];
+        $id = $matches[2];
       }
-      $options='';
-      if ( $parameters ) {
-        $got = array('"true"','"TRUE"','"True"','"false"','"FALSE"', '"False"' );
-        $want = array('true','true','true','false','false','false');
-        $options = str_replace($got,$want,json_encode($parameters));
+
+      // Get id from parameters, overriding any existing id
+      $id = trim($parameters['id'] ?? $parameters['grav-id'] ?? '');
+      unset($parameters['id']);
+      unset($parameters['grav-id']);
+
+      // If there's no id or the id is invalid, generate a new id
+      $invalidId = (preg_match('/\s/', $id) == 1);
+      if ($invalidId || !$id) {
+        $id = Utils::generateRandomString(10);
       }
-      $output = $this->twig->processTemplate('partials/datatables.html.twig',
-          [
-            'id' => $id,
-            'content' => $content,
-            'options' => $options,
-            'snippet' => $this->grav['datatables']
-          ]);
-        $this->grav['datatables'] = ''; // clear snippet for next table invocation
-        return $output;
+
+      // Insert the id attribute
+      $content = preg_replace('/\<table/i', "\\0 id=\"$id\"", $content);
+
+      // JSON encode the shortcode parameters
+      // Stripping quotes from "true" and "false", effectively casting to boolean
+      $options = preg_replace(['/"true"/i', '/"false"/i'], ['true', 'false'], json_encode($parameters));
+
+      // Process the template and decode the output
+      $output = $this->twig->processTemplate(
+        'partials/datatables.html.twig',
+        [
+          'id' => $id,
+          'content' => $content,
+          'options' => $options,
+          'snippet' => $this->grav['datatables']
+        ]
+      );
+      $this->grav['datatables'] = '';
+      return $output;
     });
   }
 }

templates/partials/datatables-error.html.twig

@@ -1,6 +1,2 @@
-<div style="background-color: #f3b624; color: red; font-weight: bold; padding: 0 10px 0 10px; margin: auto; border-radius: 20px;">
-{{message}}
-</div>
-<div style="background-color: #f3b624; color: blue; font-weight: bold; padding: 0 10px 0 10px; margin: auto; border-radius: 20px;">
-{{content}}
-</div>
+<div style="background-color: #f3b624; color: red; font-weight: bold; padding: 0 10px 0 10px; margin: auto; border-radius: 20px;">{{ message }}</div>
+<div style="background-color: #f3b624; color: blue; font-weight: bold; padding: 0 10px 0 10px; margin: auto; border-radius: 20px;">{{ content }}</div>

templates/partials/datatables.html.twig

@@ -1,10 +1,11 @@
-{{ content }}
+{{ content|raw }}
+
 <script>
-$(document).ready( function () {
-    $('#{{  id }}').DataTable({% if options %}{{ options }}{% endif %});
-    {% if snippet %}
-      var selector = '#{{ id }}';
-      {{ snippet }}
+  $(document).ready( function () {
+      $('#{{  id }}').DataTable({% if options %}JSON.parse("{{options|escape('js')}}"){% endif %});
+      {% if snippet %}
+        const selector = '#{{ id }}';
+        {{ snippet }}
       {% endif %}
-} );
+  } );
 </script>