├── LICENSE
├── README.md
├── example
    ├── data.json
    ├── index.html
    ├── jquery.min.js
    └── jsonTable.js
├── jsonTable.jquery.json
└── jsonTable.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 omkarkhair
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | json Table
 2 | =========
 3 | 
 4 | A simple jQuery plugin to get your JSON data on a table.
 5 | 
 6 | Gettings started
 7 | ----------------
 8 | You can use a table already attached to the DOM, or one you created in memory. jsonTable needs at least a thead with a tr, and a tbody. If they don't exist, they will be created.
 9 | 
10 | Initialize the table with the columns titles, and json identities to look for in the loaded file.
11 | ```javascript
12 | $("#dataTable").jsonTable({
13 | 	head : ['N.', 'Model','Operating System','Market Share'], // Goes on the <thead>
14 | 	json : ['*', 'model', 'name', 'share'] //json identities from the loaded json object
15 | });				       // NOTE : an '*' identity will generate an autoincremented column
16 | ```
17 | 
18 | The JSON data in this case looks something like this.
19 | ```json
20 | [
21 |     {"model" : "Iphone 18", "name" : "iOS", "share" : 57.56},
22 |     {"model" : "Nexus 23", "name" : "Android", "share" : 24.66},
23 |     {"model" : "Tom-tom", "name" : "Java ME", "share" : 10.72},
24 |     {"model" : "Nokia 66610", "name" : "Symbian", "share" : 2.49},
25 |     {"model" : "Blackberry", "name" : "Blackberry", "share" : 2.26},
26 |     {"model" : "Lumia", "name" : "Windows Phone", "share" : 1.33}
27 | ]
28 | ```
29 | 
30 | Update the table from a JSON file. This could be the url to your JSON endpoint. Currently only GET requests are supported.
31 | ```javascript
32 | $("#dataTable").jsonTableUpdate("data.json");
33 | ```
34 | 
35 | ####OR
36 | 
37 | Update data from a JSON object.
38 | ```javascript
39 | $("#dataTable").jsonTableUpdate([
40 |     {"id" : 1, "name" : "iOS", "share" : 57.56},
41 |     {"id" : 2, "name" : "Android", "share" : 24.66},
42 |     {"id" : 3, "name" : "Java ME", "share" : 10.72},
43 |     {"id" : 4, "name" : "Symbian", "share" : 2.49},
44 |     {"id" : 4, "name" : "Blackberry", "share" : 2.26},
45 |     {"id" : 4, "name" : "Windows Phone", "share" : 1.33}
46 | ]);
47 | ```
48 | 


--------------------------------------------------------------------------------
/example/data.json:
--------------------------------------------------------------------------------
1 | [
2 |     {"model" : "Iphone 18", "name" : "iOS", "share" : 57.56},
3 |     {"model" : "Nexus 23", "name" : "Android", "share" : 24.66},
4 |     {"model" : "Tom-tom", "name" : "Java ME", "share" : 10.72},
5 |     {"model" : "Nokia 66610", "name" : "Symbian", "share" : 2.49},
6 |     {"model" : "Blackberry", "name" : "Blackberry", "share" : 2.26},
7 |     {"model" : "Lumia", "name" : "Windows Phone", "share" : 1.33}
8 | ]
9 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 | 	    <title>jQuery : jsonTable</title>
 5 | 	    <style type="text/css">
 6 | 	        #dataTable.classy {
 7 | 	            color: red;
 8 | 	        }
 9 | 	    </style>
10 |     </head>
11 | 
12 |     <body>
13 |         <table id="dataTable" style="color: red;">
14 |         </table>
15 |         
16 |         <br/>
17 |         
18 |         <div id="container"></div>
19 |         
20 | 	    <script type="text/javascript" src="jquery.min.js"></script>
21 | 	    <script type="text/javascript" src="jsonTable.js"></script>
22 |         <script type="text/javascript">
23 |             var json_source = [
24 |                 {"model" : "Iphone 18", "name" : "iOS", "share" : 57.56},
25 |                 {"model" : "Nexus 23", "name" : "Android", "share" : 24.66},
26 |                 {"model" : "Tom-tom", "name" : "Java ME", "share" : 10.72},
27 |                 {"model" : "Nokia 66610", "name" : "Symbian", "share" : 2.49},
28 |                 {"model" : "Blackberry", "name" : "Blackberry", "share" : 2.26},
29 |                 {"model" : "Lumia", "name" : "Windows Phone", "share" : 1.33}
30 |             ];
31 |             
32 |             var options = {
33 |                 source: json_source,
34 |                 rowClass: "classy",
35 |                 callback: function(){
36 |                     alert("Table generated!");
37 |                 }
38 |             };
39 |             
40 |             ///////////////////////////////
41 |             // Test on a pre-existing table
42 | 	        $("#dataTable").jsonTable({
43 | 		        head : ['Model','Operating System','Market Share'],
44 | 		        json : ['model', 'name', 'share']
45 | 	        });
46 | 
47 | 	        $("#dataTable").jsonTableUpdate(options);
48 | 	        
49 | 	        ///////////////////////////////
50 | 	        // Test on a table not yet attached to the DOM
51 | 	        var testTable = $("<table></table>");
52 | 	
53 | 	        testTable.jsonTable({
54 | 	            head : ['N.', 'Model','Operating System','Market Share'],
55 | 	            json : ['*', 'model', 'name', 'share'] // The '*' identity will be incremented at each line
56 | 	        });
57 | 	
58 | 	        testTable.jsonTableUpdate(options);
59 | 	
60 | 	        $("#container").append(testTable);
61 |         </script>
62 |     </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/example/jsonTable.js:
--------------------------------------------------------------------------------
 1 | (function ( $ ) {
 2 |  
 3 |     $.fn.jsonTable = function( options ) {
 4 |         var settings = $.extend({
 5 |             head: [],
 6 |             json:[]
 7 |         }, options, { table: this } );
 8 |         
 9 |         table = this;
10 |         
11 |         table.data("settings",settings);
12 |         
13 |         if (table.find("thead").length == 0) {
14 |             table.append($("<thead></thead>").append("<tr></tr>"));
15 |         }
16 |         
17 |         if (table.find("thead").find("tr").length == 0) {
18 |             table.find("thead").append("<tr></tr>");
19 |         }
20 |             
21 |         if (table.find("tbody").length == 0) {
22 |             table.append($("<tbody></tbody>"));
23 |         }
24 |         
25 |         $.each(settings.head, function(i, header) {
26 |             table.find("thead").find("tr").append("<th>"+header+"</th>");
27 |         });
28 |         
29 |         return table;
30 |     };
31 | 
32 |     $.fn.jsonTableUpdate = function( options ){
33 |         var opt = $.extend({
34 |             source: undefined,
35 |             rowClass: undefined,
36 |             callback: undefined
37 |         }, options );
38 |         var settings = this.data("settings");
39 | 
40 |         if(typeof opt.source == "string")
41 |         {
42 |             $.get(opt.source, function(data) {
43 |                 $.fn.updateFromObj(data,settings,opt.rowClass, opt.callback);
44 |             });
45 |         }
46 |         else if(typeof opt.source == "object")
47 |         {
48 |             $.fn.updateFromObj(opt.source,settings, opt.rowClass, opt.callback);
49 |         }
50 |     }
51 | 
52 |     $.fn.updateFromObj = function(obj,settings,rowClass, callback){
53 |         settings.table.find("tbody").empty();
54 |         $.each(obj, function(i,line) {
55 |             var tableRow = $("<tr></tr>").addClass(rowClass);
56 |             
57 |             $.each(settings.json, function(j, identity) {
58 |                 if(identity == '*') {
59 |                     tableRow.append($("<td>"+(i+1)+"</td>"));
60 |                 }
61 |                 else {
62 |                     tableRow.append($("<td>" + line[this] + "</td>"));
63 |                 }
64 |             });
65 |             settings.table.append(tableRow);
66 |         });
67 |         
68 |         
69 |         if (typeof callback === "function") {
70 |             callback();
71 |         }
72 |         
73 |         $(window).trigger('resize');
74 |     }
75 |  
76 | }( jQuery ));
77 |  
78 | 


--------------------------------------------------------------------------------
/jsonTable.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "jsonTable",
 3 |     "title": "jsonTable",
 4 |     "description": "jQuery plugin for displaying JSON responses on a Table.",
 5 |     "keywords": [
 6 |         "json",
 7 |         "table",
 8 |         "api",
 9 |         "ajax",
10 |         "get"
11 |     ],
12 |     "version": "0.1.5",
13 |     "author": {
14 |         "name": "Omkar Khair",
15 |         "url" : "http://omkarslab.com"
16 |     },
17 |     "maintainers": [{
18 |         "name": "Damien Buty",
19 |         "url" : "http://www.dino.mx"
20 |     }],
21 |     "licenses": [
22 |         {
23 |             "type": "MIT",
24 |             "url": "https://github.com/omkarkhair/jsonTable/LICENSE"
25 |         }
26 |     ],
27 |     "bugs": "https://github.com/omkarkhair/jsonTable/issues",
28 |     "homepage": "http://plugins.jquery.com/jsonTable/",
29 |     "docs": "https://github.com/omkarkhair/jsonTable",
30 |     "dependencies": {
31 |         "jquery": ">=1.5"
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/jsonTable.js:
--------------------------------------------------------------------------------
 1 | (function ( $ ) {
 2 |  
 3 |     $.fn.jsonTable = function( options ) {
 4 |         var settings = $.extend({
 5 |             head: [],
 6 |             json:[]
 7 |         }, options, { table: this } );
 8 |         
 9 |         table = this;
10 |         
11 |         table.data("settings",settings);
12 |         
13 |         if (table.find("thead").length == 0) {
14 |             table.append($("<thead></thead>").append("<tr></tr>"));
15 |         }
16 |         
17 |         if (table.find("thead").find("tr").length == 0) {
18 |             table.find("thead").append("<tr></tr>");
19 |         }
20 |             
21 |         if (table.find("tbody").length == 0) {
22 |             table.append($("<tbody></tbody>"));
23 |         }
24 |         
25 |         $.each(settings.head, function(i, header) {
26 |             table.find("thead").find("tr").append("<th>"+header+"</th>");
27 |         });
28 |         
29 |         return table;
30 |     };
31 | 
32 |     $.fn.jsonTableUpdate = function( options ){
33 |         var opt = $.extend({
34 |             source: undefined,
35 |             rowClass: undefined,
36 |             callback: undefined
37 |         }, options );
38 |         var settings = this.data("settings");
39 | 
40 |         if(typeof opt.source == "string")
41 |         {
42 |             $.get(opt.source, function(data) {
43 |                 $.fn.updateFromObj(data,settings,opt.rowClass, opt.callback);
44 |             });
45 |         }
46 |         else if(typeof opt.source == "object")
47 |         {
48 |             $.fn.updateFromObj(opt.source,settings, opt.rowClass, opt.callback);
49 |         }
50 |     }
51 | 
52 |     $.fn.updateFromObj = function(obj,settings,rowClass, callback){
53 |         settings.table.find("tbody").empty();
54 |         $.each(obj, function(i,line) {
55 |             var tableRow = $("<tr></tr>").addClass(rowClass);
56 |             
57 |             $.each(settings.json, function(j, identity) {
58 |                 if(identity == '*') {
59 |                     tableRow.append($("<td>"+(i+1)+"</td>"));
60 |                 }
61 |                 else {
62 |                     tableRow.append($("<td>" + line[this] + "</td>"));
63 |                 }
64 |             });
65 |             settings.table.append(tableRow);
66 |         });
67 |         
68 |         
69 |         if (typeof callback === "function") {
70 |             callback();
71 |         }
72 |         
73 |         $(window).trigger('resize');
74 |     }
75 |  
76 | }( jQuery ));
77 |  
78 | 


--------------------------------------------------------------------------------