Assignment 2: Data Sorting

by Reusablecode

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=CourseInfo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">
  <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>

CSS

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;
}

JavaScript

// 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");
});