diff --git a/README.md b/README.md
index 31c4816..6d4e4d2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Datatables Plugin
-The **Datatables** Plugin is for [Grav CMS](http://github.com/getgrav/grav). It provides a shortcode to embed the awesome [DataTables](https://datatables.net) jQuery plugin.
+The **Datatables** Plugin is for [Grav CMS](http://github.com/getgrav/grav). It provides two shortcodes to embed the awesome [DataTables](https://datatables.net) jQuery plugin (v1.10.16).
## Installation
@@ -40,31 +40,129 @@ enabled: true
## Usage
-All that is needed is for the body content to contain `[datatables]
+[/datatables]
+```
It is also possible to have an inner shortcode that generates an HTML table, such at the `[sql-table]` provided by the `sqlite` grav plugin.
-### Options
-The options all relate to the DataTable plugin which are [exhaustively documented here](https://datatables.net/reference/option/).
+#### Table id
+jQuery plugins require a selector, and the `DataTables` plugin typically uses the table id.
+
+By the time `[datatables]` is processed, the content will be an HTML Table.
+
+There are three ways the `id` can be assigned:
+1. The HTML Table already is of the form `
`
+2. The `grav-id` option to `[datatables]` is assigned (see below).
+3. `[datatables]` assigns a random string.
+
+>Note: if the id provided by alteratives (1) or (2) are illegal, then a random string will be assigned as the id.
+
+#### Options to [datatables]
+All but one option (`grav-id`) relate to the DataTable plugin which are [exhaustively documented here](https://datatables.net/reference/option/).
For example:
```md
[datatables paging=false ordering=false info=false]
-Table code
+|Field 1|Field2|
+|---|---|
+|Data|1234|
[/datatables]
```
-will generate (something like) the following json object, which in turn is provided to the DataTable() function.
-```json
-{
+will generate (something like) the following
+```HTML
+
+ Field 1 | Field2 |
+ Data | 1234 |
+
+
```
+
+#### `grav-id`
+In order to allow the developer to provide a specific `id`, say to link with other code, it can be added as an option to `[datatables]`, eg.
+```md
+[datatables grav-id=SomeId]
+```
+The Id must be valid HTML, which for HTML 5 is a letter and any number of non-space characters.
+
+### [dt-script] Shortcode
+In order to access the full `DataTables` jQuery plugin, extra code needs to be added to the function.
+In addition, it is necessary to pass on the unique `id` of the table to the code.
+
+This can all be done using the `[dt-script]` inner shortcode.
+So long as the shortcode is inside the `[datatables]` code, it will be added to the initialisation function.
+
+The `id` of the `` is provided as the JS variable `selector`. This variable can then be used as in the examples given in the DataTables documentation.
+
+For example:
+```md
+[datatables paging=false ordering=false info=false]
+|Field 1|Field2|
+|---|---|
+|Data|1234|
+ [dt-script]
+ var table = $(selector).DataTable();
+ $(selector + ' tbody').on( 'click', 'tr', function () {
+ if ( $(this).hasClass('selected') ) {
+ $(this).removeClass('selected');
+ }
+ else {
+ table.$('tr.selected').removeClass('selected');
+ $(this).addClass('selected');
+ }
+ } );
+ [/dt-script]
+[/datatables]
+```
+This gets rendered as:
+```HTML
+
+ Field 1 | Field2 |
+ Data | 1234 |
+
+
+```
+## Limitations
+This version of the shortcode does not allow for DataTable plugins. This should be fairly easy to add by including plugin configuration codes for each plugin required.
+However, it would be interesting to see whether there is any need to add plugins.
+
## Credits
All the credit is due to the people at `https://datatables.net`.
+The version of DataTables is given in the heading.
+
## To Do
-- [ ] Future plans, if any
+- [ ] Bump the version when new versions of DataTables come out.
+- [ ] Add DataTable plugin support.
diff --git a/datatables.php b/datatables.php
index 1746e4a..17f8d99 100644
--- a/datatables.php
+++ b/datatables.php
@@ -10,6 +10,8 @@
*/
class DatatablesPlugin extends Plugin
{
+ protected $script;
+
public static function getSubscribedEvents()
{
return [
@@ -31,6 +33,7 @@ public function onPluginsInitialized()
// Add JQuery plugin assets
$this->grav['assets']->addCss( 'plugin://datatables/assets/datatables.min.css');
$this->grav['assets']->addJs( 'plugin://datatables/assets/datatables.js');
+ $this->grav['datatables'] = $this->script = '';
}
public function onTwigTemplatePaths()
diff --git a/shortcodes/DataTablesScript.php b/shortcodes/DataTablesScript.php
new file mode 100644
index 0000000..0e04d6b
--- /dev/null
+++ b/shortcodes/DataTablesScript.php
@@ -0,0 +1,20 @@
+shortcode->getHandlers()->add('dt-script', function(ShortcodeInterface $sc) {
+ $content = trim($sc->getContent());
+ 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);
+ }
+ if ( isset($this->grav['datatables'] )) $this->grav['datatables'] .= $content;
+ return '';
+ });
+ }
+}
diff --git a/shortcodes/DataTablesShortcode.php b/shortcodes/DataTablesShortcode.php
index a6ae5db..b926e86 100644
--- a/shortcodes/DataTablesShortcode.php
+++ b/shortcodes/DataTablesShortcode.php
@@ -9,6 +9,7 @@ public function init()
{
$this->shortcode->getHandlers()->add('datatables', function(ShortcodeInterface $sc) {
$content = $sc->getContent();
+ $parameters = $sc->getParameters();
$id = '';
$res = preg_match('/\]*?\>(.*)\<\/table[^>]*\>/ims',$content);
// does table have a table attached?
@@ -25,29 +26,37 @@ public function init()
// id either has spaces - illegal - or is null, so strip output
$content = $matches[1] . $matches[3];
} else {
- $id = $matches[2];
+ $id = $matches[2];
+ }
}
- }
}
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 getParameters();
+ $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));
}
- return $this->twig->processTemplate('partials/datatables.html.twig',
+ $output = $this->twig->processTemplate('partials/datatables.html.twig',
[
'id' => $id,
'content' => $content,
- 'options' => $options
+ 'options' => $options,
+ 'snippet' => $this->grav['datatables']
]);
+ $this->grav['datatables'] = ''; // clear snippet for next table invocation
+ return $output;
});
}
}
diff --git a/templates/partials/datatables.html.twig b/templates/partials/datatables.html.twig
index b7179ce..3d1c4bf 100644
--- a/templates/partials/datatables.html.twig
+++ b/templates/partials/datatables.html.twig
@@ -1,6 +1,10 @@
{{ content }}