Pivot Table Generator With jQuery And JSON Data - createTableJSON

createTableJSON is a jQuery plugin that enables you to dynamically render complex pivot tables from local or external JSON data.

How to use it:

1. Load the Tablas.css to style the generated table.

<link rel="stylesheet" href="Tablas.css">

1. Create an container where you want to render the dynamic pivot table.

<div id="example"></div>

2. Load jQuery library and the createTableJSON plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="createTableJSON.js"></script>

3. Initialize the plugin and specify the JSON data from which you want to render into the pivot table.

$("#example").createTableJSON({
  url: "data.json"
});

4. You're also allowed to define the data in the 'data' option:

$("#example").createTableJSON({
  data: ""
});

5. The JSON data should be like this:

{
  "Table": {
    "Id": "Table ID",
    "Class":"table-class",
    "Thead":{
      "Type":"thead",
      "Rows":[
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"th",
              "Html":"Head 1"
            },
            {
              "Class": "cell-class",
              "Type":"th",
              "Html":"Head 2"
            },
            {
              "Class": "cell-class",
              "Type":"th",
              "Html":"Head 3"
            }
          ]
        }
      ]
    },
    "Tbody": {
      "Type":"tbody",
      "Rows":[
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            }
          ]
        },
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            }
          ]
        },
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            }
          ]
        },
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            }
          ]
        },
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"00,0"
            }
          ]
        }
      ]
    },
    "Tfoot": {
      "Type":"tfoot",
      "Rows":[
        {
          "Cells":[
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"Total: 00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"Total: 00,0"
            },
            {
              "Class": "cell-class",
              "Type":"td",
              "Html":"Total: 00,0"
            }
          ]
        }
      ]
    }
  }
}

6. Set the HTTP method to use for the AJAX request.

$("#example").createTableJSON({
  type:    'POST'
});

---

This awesome jQuery plugin is developed by nitsugario. For more Advanced Usages, please check the demo page or visit the official website.