jquery template building grid -

jquery template building grid -

i have json below

[ { "username": "john robertson", "operatoruserid": 1177, "partcategoryid": 0, "partcategoryname": null, "unitcount": 22, "categorywisecount": 13, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [6, 1, 2, 0, 0, 0, 13, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "user1", "operatoruserid": 39, "partcategoryid": 0, "partcategoryname": null, "unitcount": 13, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [1, 0, 3, 1, 1, 0, 0, 6, 1], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "margaret graham", "operatoruserid": 1169, "partcategoryid": 0, "partcategoryname": null, "unitcount": 2, "categorywisecount": 2, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [2, 0, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "stuart white", "operatoruserid": 961, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "bob van schie", "operatoruserid": 1007, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "caird hay", "operatoruserid": 1184, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "bsoni", "operatoruserid": 2575, "partcategoryid": 0, "partcategoryname": null, "unitcount": 3, "categorywisecount": 2, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 0, 0, 0, 1, 0, 2, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "tsname", "operatoruserid": 2576, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 0, 0, 0, 0, 1, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }]

i want above info in grid using jquery template.

john robertson user1 margaret graham ..... base of operations unit 6 1 ... hard drive 1 0 ... .....

explanation

there few things need clear before start.

first: i'm assuming "template" mean plugin, because jquery.template still in it's beta, , it's not recommended utilize yet. besides, won't much.

you can larn how build own plugins starting here, going give finish illustration of how done (further down).

generally, when want element related plugin, begins

(function($) { //prototype $.fn.myplugin = function(){ //logic $(this).append("hello world!"); } })(jquery); $("#element").myplugin();

otherwise, general function accessed through $, it's just

(function($) { //prototype $.myplugin = function(){ //logic alert("hello world!"); } })(jquery); $.myplugin();

second: when sending json through ajax you'd want have object tied json, not array. json stands javascript object notation, looking @ name, should tell it's got objects. in other words, need send object using curly braces {}.

so, json should this

{ data: ["hello ", "world", "!", {time: "hh:mm:ss", date: "yyyy-mm-dd"} }

you can read more on wikipedia.

third: clarification, request json info on ajax call, have specify datatype json. done this

$.ajax({ url: "example_json_output.txt", datatype: "json", success: function(json){ alert(json.stringify(json)); } });

note used function json.stringify, serializes (puts variables text) variable. great debugging purposes! :)

alternatively, can utilize shorthand version, getjson

$.getjson("example_json_output.txt", function(json) { alert(json.stringify(json)); }); solution

before give code, here screenshot of result should like.

of course, i'm not saying should did, in fact, encourage differently. practice makes perfect. besides, might not kind of layout wanted.

as promised, here's code produce above screenshot. i'll start javascript file , json output, relevant. note files within same folder.

file: javascript "example.js"

$(document).ready(function(){ $("body").myplugin(); }); (function($) { $.fn.myplugin = function(){ //internal reference var _this = this; //begin request $.ajax({ url: "example_json_output.txt", datatype: "json", success: build }); function construct(json){ //check if returned if(json.data == null) return; //main components var nmaincontainer = $("<div>"), nlisttable = $("<table>"); nmaincontainer.addclass("cmain"); nlisttable.addclass("ctable"); nlisttable.attr({"cellspacing":"0px", "cellpadding":"5px"}) //categories var ayheaders = json.data[0].listcategories; //users row (top row) var nuserrow = $("<tr>"); nuserrow.addclass("users"); nuserrow.append($("<th>")); for(j = 0; j < json.data.length; j++){ var nuser = $("<th>"), sclass = "even"; if(j % 2 == 0) sclass = "odd"; nuser.addclass(sclass); nuser.append(json.data[j].username); nuserrow.append(nuser); } //add users row main table nlisttable.append(nuserrow); //begin iteration for(i = 0; < ayheaders.length; i++){ //category var nrow = $("<tr>"), nhead = $("<th>"+ayheaders[i]+"</th>"), srowclass = "even"; //check row number if( % 2 == 0 ) srowclass = "odd"; nrow.addclass(srowclass); //new category nrow.append(nhead); for(j = 0; j < json.data.length; j++){ //data row json var ocurrentdata = json.data[j]; var suser = ocurrentdata.username, alistdata = ocurrentdata.listcategorywisecount, scolumnclass = "even"; var ntabledata = $("<td>"); //check column number if( j % 2 == 0 ) scolumnclass = "odd"; ntabledata.addclass(scolumnclass); ntabledata.append(alistdata[i]); //add info current category row nrow.append(ntabledata); } //add category row main table nlisttable.append(nrow); } //add main table container nmaincontainer.append(nlisttable); //add container element $(_this).append(nmaincontainer); } } })(jquery);

file: text document "example_json_output.txt"

{"data": [ { "username": "john robertson", "operatoruserid": 1177, "partcategoryid": 0, "partcategoryname": null, "unitcount": 22, "categorywisecount": 13, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [6, 1, 2, 0, 0, 0, 13, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "user1", "operatoruserid": 39, "partcategoryid": 0, "partcategoryname": null, "unitcount": 13, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [1, 0, 3, 1, 1, 0, 0, 6, 1], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "margaret graham", "operatoruserid": 1169, "partcategoryid": 0, "partcategoryname": null, "unitcount": 2, "categorywisecount": 2, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [2, 0, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "stuart white", "operatoruserid": 961, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "bob van schie", "operatoruserid": 1007, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "caird hay", "operatoruserid": 1184, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 1, 0, 0, 0, 0, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "bsoni", "operatoruserid": 2575, "partcategoryid": 0, "partcategoryname": null, "unitcount": 3, "categorywisecount": 2, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 0, 0, 0, 1, 0, 2, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] }, { "username": "tsname", "operatoruserid": 2576, "partcategoryid": 0, "partcategoryname": null, "unitcount": 1, "categorywisecount": 1, "totalusers": 0, "totalcategories": 0, "mainarraycount": null, "newmainarraycount": null, "listcategorywisecount": [0, 0, 0, 0, 0, 1, 0, 0, 0], "listcategories": ["base unit", "hard drive", "laptop", "laptop ac adapter", "motherboard", "optical drive", "processor (cpu)", "server", "tft"], "listusers": ["john robertson", "user1", "margaret graham", "stuart white", "bob van schie", "caird hay", "bsoni", "tsname"] } ]}

file: html "example.html"

<html> <head> <link rel='stylesheet' type='text/css' href='example.css'> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type='text/javascript' src='example.js'></script> </head> <body> </body> </html>

file: css "example.css"

.cmain{padding: 5px;} .ctable{border: 1px solid black;} .ctable tr:first-child th{ border-bottom: 1px solid black; text-align: center; } .ctable tr th:first-child{ border-right: 1px solid black; text-align: right; } .ctable tr.odd td{background-color: #cbcbcb;} .ctable tr.odd th{background-color: #b3b3b3;} .ctable tr:first-child th.even{background-color: #accbe6;} .ctable tr.even td.even{background-color: #cee1f2;} .ctable tr.odd td.even{background-color: #a3c0d9;} .ctable tr td{padding: 3px;} .ctable tr:first-child th:first-child{background-color: #666;} .ctable tr:first-child th:not(:first-child){width: 100px;}

jquery jquery-templates