HTML Markup

<body>
<div>
<div id="location-template">
<table>
<thead>
<th class="dynatable-head" data-dynatable-column="details">Details</th>
</thead>
<tbody class="sitebody"></tbody>
</table>
</div>
<div id="list-template">
<table>
<thead>
<th class="nameHdr dynatable-head" data-dynatable-column="name1">Name</th>
<th class="nbrHdr dynatable-head" data-dynatable-column="ext1">Ext</th>
<th class="nameHdr dynatable-head" data-dynatable-column="name2">Name</th>
<th class="nbrHdr dynatable-head" data-dynatable-column="ext2">Ext</th>
<th class="nameHdr dynatable-head" data-dynatable-column="name3">Name</th>
<th class="nbrHdr dynatable-head" data-dynatable-column="ext3">Ext</th>
<th class="nameHdr dynatable-head" data-dynatable-column="name4">Name</th>
<th class="nbrHdr dynatable-head" data-dynatable-column="ext4">Ext</th>
</thead>
<tbody class="listbody"></tbody>
</table>
</div>
</div>
<div class="list-content"></div>
</body>


onClientLoad Javascript

//initialize global variables
var location = "";
var listContent = $(".list-content")
//get the json feed and execute the callback function upon success
$.getJSON("xPrintListCat?readviewentries&count=5000&outputformat=JSON",function(data) {
//iterate over 'data' object, run callback function processing each entry
$.each(data.viewentry, function(index, obj) {
var pos = data.viewentry[index]["@position"]
// Level is indicated by length of entry data in each view row
// 1 = Top Level - Location
// 2 = Entry Category - Conference Room,Individuals, Production Category
// 3 = Entry Details - Name, Extension
var level = data.viewentry[index].entrydata.length;
if (level == 1) {
//set location variable
location = data.viewentry[index].entrydata[0].text[0];
//initialize type counter
type = 1;
//add horizontal rule to the DOM preceding each location
listContent.append("<hr>")
} else if (level == 2) {
// Is this a phone number category: position is not in the format n.1
// position n.1 is the location "category" and is to be ignored
if (pos.match("^[0-9]+\.1") == null) {
//set phone type, number of rows
phoneType = data.viewentry[index].entrydata[0].text[0]
//use the @descendents parameter to get the number of entries
entries = data.viewentry[index]["@descendants"];
//calculate number of rows necessary
//ceiling function returns the smallest integer >= the number passed
rows = Math.ceil(entries/4);
//variable initialization
entryCounter = 1;
finalData = [];
type += 1;
}
} else if (level == 3) {
//if current entry is a location detail entry, set up and render Table
//use REGEX match on position: n.n.1 are the location detail entries
if (pos.match("^[0-9]+\.1\.1") != null) {
//get template for location header table
var template = $($("#location-template").html())
//clone table and add to DOM
listContent.append(template.clone().attr('id',"loc-" + location + "-hdr"))
//get the table that was just added to the DOM
var myTable = $('#loc-' + location + "-hdr")
//add table caption equal to the location name
myTable.prepend("<caption class=\"siteHeader\">" + location + "</caption>")
//Prepare header details
var hdrData = [];
hdrData = {details : data.viewentry[index].entrydata[1].text[0]};
//render table to the DOM using Dynatable.js
myTable.dynatable( {
dataset : {
records : hdrData},
features : {
paginate : false,
sort : false,
search : false,
recordCount : false},
table : {
headRowClass: 'hideElement'}
});
//exit processing to next item in the each loop
return;
}
//current entry is phone entry, check to see which column this entry belongs
if (entryCounter <= rows) {
// Initialize "row" of the data array, place data in "column 1"
var temp = {
name1 : data.viewentry[index].entrydata[1].text[0],
ext1 : data.viewentry[index].entrydata[2].text[0],
name2 : "",
ext2 : "",
name3 : "",
ext3 : "",
name4 : "",
ext4 : ""
}
finalData.push(temp)
} else if (entryCounter <= rows * 2) {
// add to "column 2"
i = entryCounter - rows - 1
finalData[i].name2 = data.viewentry[index].entrydata[1].text[0]
finalData[i].ext2 = data.viewentry[index].entrydata[2].text[0]
} else if (entryCounter <= rows * 3) {
// add to "column 3"
i = entryCounter - (rows * 2) - 1
finalData[i].name3 = data.viewentry[index].entrydata[1].text[0]
finalData[i].ext3 = data.viewentry[index].entrydata[2].text[0]
} else {
// add to "column 4"
i = entryCounter - (rows * 3) - 1
finalData[i].name4 = data.viewentry[index].entrydata[1].text[0]
finalData[i].ext4 = data.viewentry[index].entrydata[2].text[0]
}
entryCounter += 1;
//if entry is last entry in the category, render the entire category
if (entryCounter > entries) {
//get template for detail tables
var template = $($("#list-template").html())
//clone the template and add to the DOM
listContent.append(template.clone().attr('id',"loc-" + location + "-" + type))
//get the table that was just added
var myTable = $('#loc-' + location + "-" + type)
//add table header
myTable.prepend("<caption class=\"typeHeader\">" + phoneType + "</caption>")
//render table to the DOM using Dynatable.js
myTable.dynatable( {
dataset : {
records : finalData},
features : {
paginate : false,
sort : false,
search : false,
recordCount : false}
});
}
}
});
// hide templates, and apply classes to table body columns
$("#list-template").hide()
$("#location-template").hide()
$(".listbody").find("td").addClass("details")
$(".sitebody").find("td").addClass("siteDetail")
});