<script id="studentTemplate" type="text/x-jquery-tmpl"> <h3><a href="#">${LName + ", " + FName}</a></h3> <div> <table> <tr> <td class="leftcell"> <p class="bold"><a href="http://maps.google.com/maps?q=${Lat},${Lon}" target="_blank">${City}, ${State}</a></p> Phone: ${Phone}<br /> Fax: ${Fax}<br /> Email: <a href="mailto:${Email}">${Email}</a><br /> DOB: ${DOB} (Age: ${Age})<br /> </td> <td class="middlecell"> <p class="bold">Homework</p> ${HW1}<br /> ${HW2}<br /> ${HW3}<br /> ${HW4}<br /> </td> <td class="rightcell"> <p class="bold">Quizzes</p> ${Quizzes[0]}<br /> ${Quizzes[1]}<br /> ${Quizzes[2]}<br /> ${Quizzes[3]}<br /> </td> </tr> <tr> <td colspan="3" class="maincell"> <hr /> <p class="notes">${Notes}</p> </td> </tr> </table> </div> </script> <script> $(function(){ // Accordion $("#accordion").accordion({ header: "h3", collapsible: true }); }); </script> <div id="accordion"> </div>
body { font: 65% "Trebuchet MS", sans-serif; margin: 15px; } table, .maincell { padding: 5px 0px 0px 0px; width: 100%; } .leftcell { width: 60%; } .middlecell { width: 20%; } .rightcell { width: 20%; } .bold { font-weight: bold; padding: 0px 0px 5px 0px; } .notes { font-style: italic; padding: 5px 0px 0px 0px; }
// First organize data alphabetically by last name then first name students.sort(function(a,b) { return (a.LName > b.LName) ? 1 : ((b.LName > a.LName) ? -1 : ((a.FName > b.FName) ? 1 : ((b.FName > a.FName) ? -1 : 0))); }); // Then iterate over new data and populate to jqeury template plugin $.each(students,function(index,student){ var dob = new Date(), today = new Date(), dates = this.DOB.split("/"); dob.setFullYear("19" + dates[2], dates[0] - 1, dates[1]); this.Age = Math.floor((today.getTime() - dob.getTime()) / (365.25 * 24 * 60 * 60 * 1000)); $("#studentTemplate").tmpl(student).appendTo("#accordion"); });