* #35. ajax autoload period + readme

README.md

@@ -23,6 +23,8 @@ GigaTables supports the following capabilities:
 
 -- 7 popular languages,
 
+-- data load period,
+
 -- hot keys
 
 and more...
@@ -35,6 +37,7 @@ and more...
   * [Advanced configuration with opts and editor](#user-content-advanced-configuration-with-opts-and-editor)  
 * [An example of using GigaTables with Editor tool](#user-content-an-example-of-using-gigatables-with-editor-tool)
 * [Pagination or Infinite scroll](#user-content-pagination-or-infinite-scroll)
+* [Ajax autoload period](#user-content-ajax-autoload-period)
 * [Hot keys](#user-content-hot-keys)
 * [FAQ](#user-content-faq)
 
@@ -308,6 +311,18 @@ struct: {
 ```
 even if You leave `pagination` option there - infinite scroll will take precedence.
 
+## Ajax autoload period
+
+If You need an autoload period set for online live-loaded grid data, just add 2 properties to settings object:
+
+```JS
+ajaxAutoloadData: true, // default false
+ajaxAutoloadPeriod: 8, // sec
+```
+
+the `ajaxAutoloadPeriod` must be set in seconds and the interval should be placed between 5 and 300 seconds, 
+if U wish to switch the mode to classic loader without touching settings structure - set the `ajaxAutoloadData: false`.
+
 ## Hot keys
 
 To efficiently manage table behavior You can use the following hot keys:

main.js

@@ -63,6 +63,8 @@ var settings = {
  perPageRows: [25, 50, 100, 200],
  defaultPerPage: 100,
  ajax: 'http://gigatables.loc/gigatables.php',
+ // ajaxAutoloadData: true, // default false
+ // ajaxAutoloadPeriod: 8, // sec
  requestType: 'GET',
  columns: [
    {// include all defaults

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gigatables-react",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems. It supports ajax data processing/editing (CRUD), pagination, cross-sorting, global search, shft/ctrl rows selection, 7 popular languages and more.",
   "main": "./build/index.js",
   "dependencies": {

src/Reactables.jsx

@@ -85,6 +85,7 @@ class Reactables extends Main {
         this.setCustomColumns(object);
       });
     }
+
     fetch(this.settings.ajax).then((response) =>
     {// set ajax loader fo BD
       this.setLoader(columns.length);
@@ -99,6 +100,29 @@ class Reactables extends Main {
       this.createTable(jsonData);
       this.setTableSort();
     });
+    // only set interval if both properties set and period >= 5 sec
+    if (typeof this.settings.ajaxAutoloadData !== CommonConstants.UNDEFINED
+      && typeof this.settings.ajaxAutoloadPeriod !== CommonConstants.UNDEFINED
+      && this.settings.ajaxAutoloadData === true
+      && parseInt(this.settings.ajaxAutoloadPeriod) >= CommonConstants.MIN_AUTOLOAD_PERIOD
+      && parseInt(this.settings.ajaxAutoloadPeriod) <= CommonConstants.MAX_AUTOLOAD_PERIOD) {
+      setInterval(() => {
+        fetch(this.settings.ajax).then((response) =>
+        {// set ajax loader fo BD
+          this.setLoader(columns.length);
+          return response.json();
+        })
+        .then((data) => {
+          let jsonData = data['rows'] ? data['rows'] : data['row']; // one row or several
+          if (typeof jsonData === CommonConstants.UNDEFINED) {
+            throw new DataException('JSON must contain "rows" field.');
+          }
+          this.jsonData = jsonData;
+          this.createTable(jsonData);
+          this.setTableSort();
+        });
+      }, parseInt(this.settings.ajaxAutoloadPeriod) * 1000);
+    }
   }
 
   componentDidMount()

src/components/CommonConstants.js

@@ -46,5 +46,7 @@ module.exports = {
   DISPLAY_BOTTOM: 'bottom',
   SORT_PERIOD: 200,
   TARGET: 'target',
-  RENDER: 'render'
+  RENDER: 'render',
+  MIN_AUTOLOAD_PERIOD: 5, // 5 sec
+  MAX_AUTOLOAD_PERIOD: 300 // 5 min
 }