Add working support for datatable configurations

Author: bcopy

README.md

@@ -12,41 +12,44 @@ With regards to support for dynamic data source, note that the plugin can only i
  npm install bcopy/gitbook-plugin-datatables
  ```
 
-* Add the plugin to your `book.json` :
+* Add the plugin to your `book.json`, for example :
 
 ```json
 {
-  "plugins": ["datatables"]
+  "plugins": ["datatables"],
+  (...)
+  "pluginsConfig":{
+    "datatables":{
+            "config-url" : "/data/dtconfig.json",
+            "default-config": {"pageLength": 50 }
+    }
+  }
 }
 ```
 
 ## DataTables Configuration
 
-In order to configure your datatables, you can use [inline HTML 5 data attributes](https://datatables.net/manual/options#HTML-5-data-attributes) for simple cases, or provide a javascript module exposing the configuration associating a CSS selector with the configuration you wish to see applied.
-For it to work, your module must export an object constant ```DATATABLES_CONFIG```, as in the example below.
+In order to configure your datatables, you can use [inline HTML 5 data attributes](https://datatables.net/manual/options#HTML-5-data-attributes) for simple cases, or provide a JSON object associating a CSS selector with the datatable configuration you wish to see applied to matching DOM elements.
+For it to work, your JSON file must be valid, as in the example below.
 
 For instance, to configure an HTML table bearing the ID "accounting", you could use :
 
-```javascript
-module.exports = Object.freeze({
-   DATATABLES_CONFIG : {
-    "#accounting" : {
-        ajax: '/data/objects.txt',
-        columns: [
-            { data: 'name' },
-            { data: 'position' },
-            { data: 'office' },
-            { data: 'extn' },
-            { data: 'start_date' },
-            { data: 'salary' }
-        ],
-        order: [[2, 'asc']],
-        rowGroup: {
-            dataSrc: 'office'
-        }
-    }
+```json
+{
+   "#accounting":{
+      "ajax":"/data/objects.txt",
+      "columns":[
+         { "data":"name" },
+         { "data":"position" },
+         { "data":"office" },
+         { "data":"extn" },
+         { "data":"start_date" },
+         { "data":"salary" }
+      ],
+      "order":[ [ 2, "asc" ] ],
+      "rowGroup":{ "dataSrc":"office" }
    }
-});
+}
 ```
 
 ## Features

assets/js/plugin.js

@@ -4,20 +4,25 @@ require(["gitbook", "jQuery"], function(gitbook, $) {
     var defaultDatatablesConfig = {}
 
     gitbook.events.bind('start', function(e, bookPluginConfig) {
-        // simply retain in parent scope (for subsequent use)
         config = bookPluginConfig['datatables'];
 
-        if (config.defaultConfig) {
-            defaultDatatablesConfig = config.defaultConfig;
+        if (config["default-config"]) {
+            defaultDatatablesConfig = eval(config["default-config"]);
         }
 
-        // If configured, keep the datatablesConfig available
-        if (config.configLocation) {
-            // require the module and keep a copy of the map
-            datatablesConfig = require(config.configLocation).DATATABLES_CONFIG;
+        // If configured and valid JSON, initialize the datatablesConfig
+        if (config["config-url"]) {
+            $.ajax({ url: config["config-url"]
+                   , contentType: 'application/json; charset=UTF-8'
+                   , async: false
+                   , success: function( data ){
+                        datatablesConfig = eval(data);
+                    }
+                    , error: function(errorData){
+                        console.log("Datatables Config ajax call failed - invalid JSON or mime type ?", errorData);
+                    }
+                }); 
         }
-
-        console.debug('start event ... config: ', config);
       });
 
     // listen for gitbook "page.change" events
@@ -30,16 +35,14 @@ require(["gitbook", "jQuery"], function(gitbook, $) {
                 var tableElement = $(this);
 
                 // Try and match this to any of the CSS selectors in the datables config map
-                $.each(datatablesConfig,function(index, selector){
+                $.each(datatablesConfig,function(selector){
                     if(tableElement.is(selector)){
-                        $.extend(dtConfig, datatablesConfig[selector])
+                        $.extend(dtConfig, datatablesConfig[selector]);
                     }
                 });
 
                 // Construct the datatable and apply the custom configuration if any
                 new DataTable(this,dtConfig);
             });
-
-        
     });
 });

package.json

@@ -18,12 +18,18 @@
       "force": {
         "type": "boolean",
         "required": false,
-        "title": "Force all generated tables to support datatables"
+        "title": "Force all generated tables to support datatables (if set to true, all HTML and markdown tables will become datatables)",
+        "value": false
       },
-      "configLocation": {
+      "config-url": {
         "type": "string",
         "required": false,
-        "title": "Location of a js module exposing DATATABLES_CONFIG"
+        "title": "URL of a valid json file containing datatables configurations"
+      },
+      "default-config": {
+        "type": "object",
+        "required": false,
+        "title": "Default datatables configuration to apply to all datatables"
       }
     }
   },