Created
December 12, 2018 12:43
-
-
Save Vincent-gv/1cc80b742c5eb2cfaf7d0123d222e274 to your computer and use it in GitHub Desktop.
// source https://jsbin.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"/> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<title>Students</title> | |
<link rel="stylesheet" href="css/reset.css"> | |
<link rel="stylesheet" href="css/design.css"> | |
<style id="jsbin-css"> | |
body{ | |
background-color: #e1f1f6; | |
font-family: Helvetica, sans-serif; | |
color: #222; | |
} | |
.page{ | |
margin: 50px auto; | |
width: 70%; | |
background-color: #fff; | |
border-radius: 5px; | |
padding: 50px; | |
} | |
.page-header{ | |
margin-bottom: 20px; | |
} | |
.page-header h2{ | |
float: left; | |
font-size: 22px; | |
text-transform: uppercase; | |
font-weight: bold; | |
color: #555; | |
} | |
.page-header .student-search{ | |
float: right; | |
} | |
.page-header .student-search input{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
} | |
.page-header .student-search button{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
background-color: #4ba6c3; | |
color: #fff | |
} | |
.student-list{} | |
.student-item{ | |
margin: 0 0 20px 0; | |
padding: 0 0 20px 0; | |
border-bottom: 1px solid #eaeaea; | |
} | |
.student-details{ | |
width: 50%; | |
float: left; | |
} | |
.student-details .avatar{ | |
width: 40px; | |
height: auto; | |
border-radius: 20px; | |
float: left; | |
margin-right: 14px | |
} | |
.student-details h3{ | |
margin: 4px 0 2px 0; | |
font-weight: bold; | |
color: #4ba6c3; | |
} | |
.student-details .email{ | |
color: #888; | |
font-size: 14px; | |
} | |
.joined-details{ | |
width: 50%; | |
float: left; | |
text-align: right; | |
} | |
.joined-details .date{ | |
margin-top: 15px; | |
display: block; | |
font-size: 14px; | |
color: #999; | |
} | |
.student-item:last-child{ | |
margin: 0; | |
padding: 0; | |
border-bottom: none; | |
} | |
.pagination{ | |
margin: 40px 0 0 0; | |
text-align: center; | |
} | |
.pagination li{ | |
display: inline; | |
cursor: pointer; | |
} | |
.pagination li a{ | |
border: 1px solid #eaeaea; | |
border-radius: 5px; | |
padding: 3px 8px; | |
text-decoration: none; | |
color: #4ba6c3; | |
} | |
.pagination li a.active, | |
.pagination li a:hover{ | |
background-color: #4ba6c3; | |
color: #fff; | |
} | |
/* Custom CSS */ | |
.hidden { | |
display: none; | |
} | |
.not-active { | |
display: none; | |
} | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
.cf:after { | |
content: "."; | |
visibility: hidden; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="listingTable"></div> | |
<a href="javascript:prevPage()" id="btn_prev">Prev</a> | |
<a href="javascript:nextPage()" id="btn_next">Next</a> | |
page: <span id="page"></span> | |
<div class="page"> | |
<div class="page-header cf"> | |
<h2>Students</h2> | |
</div> | |
<ul class="student-list"> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> | |
<h3>iboya vat</h3> | |
<span class="email">iboya.vat@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<!-- Add new student for test --> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> | |
<h3>iboya colin</h3> | |
<span class="email">iboya.vat@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<!-- End: Add new student for test --> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> | |
<h3>aapo niskanen</h3> | |
<span class="email">aapo.niskanen@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> | |
<h3>phillip cox</h3> | |
<span class="email">phillip.cox@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/11/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg"> | |
<h3>zilda moreira</h3> | |
<span class="email">zilda.moreira@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg"> | |
<h3>lilou le gall</h3> | |
<span class="email">lilou.le gall@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/16/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg"> | |
<h3>lucy hall</h3> | |
<span class="email">lucy.hall@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/11/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> | |
<h3>mark colin</h3> | |
<span class="email">mark.colin@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/14/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg"> | |
<h3>sara alves</h3> | |
<span class="email">sara.alves@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/19/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>ramon macrae</h3> | |
<span class="email">ramon.macrae@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/13/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg"> | |
<h3>connor taylor</h3> | |
<span class="email">connor.taylor@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/18/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg"> | |
<h3>aymeric morel</h3> | |
<span class="email">aymeric.morel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>lorenz otto</h3> | |
<span class="email">lorenz.otto@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/11/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> | |
<h3>karl williamson</h3> | |
<span class="email">karl.williamson@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/12/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> | |
<h3>ouassim heering</h3> | |
<span class="email">ouassim.heering@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/18/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>roberto molina</h3> | |
<span class="email">roberto.molina@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg"> | |
<h3>jordan hubert</h3> | |
<span class="email">jordan.hubert@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> | |
<h3>melvin baker</h3> | |
<span class="email">melvin.baker@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/18/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg"> | |
<h3>everett gordon</h3> | |
<span class="email">everett.gordon@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg"> | |
<h3>aiden ma</h3> | |
<span class="email">aiden.ma@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/18/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg"> | |
<h3>florent gerard</h3> | |
<span class="email">florent.gerard@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/12/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg"> | |
<h3>amber chen</h3> | |
<span class="email">amber.chen@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/12/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg"> | |
<h3>alexandra davies</h3> | |
<span class="email">alexandra.davies@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/11/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg"> | |
<h3>sergio cole</h3> | |
<span class="email">sergio.cole@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg"> | |
<h3>edgar dixon</h3> | |
<span class="email">edgar.dixon@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg"> | |
<h3>kirk myers</h3> | |
<span class="email">kirk.myers@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg"> | |
<h3>ani hesseling</h3> | |
<span class="email">ani.hesseling@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 08/14/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> | |
<h3>victoire bonnet</h3> | |
<span class="email">victoire.bonnet@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/13/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg"> | |
<h3>marcos morales</h3> | |
<span class="email">marcos.morales@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/12/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> | |
<h3>nils neumann</h3> | |
<span class="email">nils.neumann@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/11/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg"> | |
<h3>emily harrison</h3> | |
<span class="email">emily.harrison@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/18/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>matthew fortin</h3> | |
<span class="email">matthew.fortin@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/18/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg"> | |
<h3>charlotte steward</h3> | |
<span class="email">charlotte.steward@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> | |
<h3>marceau rodriguez</h3> | |
<span class="email">marceau.rodriguez@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/13/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>hudson anderson</h3> | |
<span class="email">hudson.anderson@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg"> | |
<h3>warren phillips</h3> | |
<span class="email">warren.phillips@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/11/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>leo niva</h3> | |
<span class="email">leo.niva@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/14/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> | |
<h3>hani prevoo</h3> | |
<span class="email">hani.prevoo@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/11/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg"> | |
<h3>veronica rodriguez</h3> | |
<span class="email">veronica.rodriguez@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/17/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>ginestal das neves</h3> | |
<span class="email">ginestal.das neves@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/19/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> | |
<h3>devon barnes</h3> | |
<span class="email">devon.barnes@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/19/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg"> | |
<h3>brennan pierce</h3> | |
<span class="email">brennan.pierce@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/15/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> | |
<h3>zachary singh</h3> | |
<span class="email">zachary.singh@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/19/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> | |
<h3>arlo harris</h3> | |
<span class="email">arlo.harris@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg"> | |
<h3>hannah ginnish</h3> | |
<span class="email">hannah.ginnish@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/17/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg"> | |
<h3>goos brunt</h3> | |
<span class="email">goos.brunt@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>eduard riedel</h3> | |
<span class="email">eduard.riedel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg"> | |
<h3>geesken jekel</h3> | |
<span class="email">geesken.jekel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/12/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg"> | |
<h3>dolores ryan</h3> | |
<span class="email">dolores.ryan@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>steven rogers</h3> | |
<span class="email">steven.rogers@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> | |
<h3>virgulino silva</h3> | |
<span class="email">virgulino.silva@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg"> | |
<h3>lucile bertrand</h3> | |
<span class="email">lucile.bertrand@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg"> | |
<h3>elsa lahti</h3> | |
<span class="email">elsa.lahti@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 04/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg"> | |
<h3>soline leclercq</h3> | |
<span class="email">soline.leclercq@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/12/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg"> | |
<h3>henri kruse</h3> | |
<span class="email">henri.kruse@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/14/13</span> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<script src="js/list.js" charset="utf-8"></script> | |
<script id="jsbin-javascript"> | |
var studentItem = document.getElementsByClassName('student-item cf'); | |
var current_page = 1; | |
var records_per_page = 2; | |
console.log(studentItem); | |
var objJson = Array.prototype.slice.call(studentItem); | |
//objJson.forEach(function(item, index, array) { | |
// console.log((item, index)); | |
//}); | |
function prevPage() | |
{ | |
if (current_page > 1) { | |
current_page--; | |
changePage(current_page); | |
} | |
} | |
function nextPage() | |
{ | |
if (current_page < numPages()) { | |
current_page++; | |
changePage(current_page); | |
} | |
} | |
function changePage(page) | |
{ | |
var btn_next = document.getElementById("btn_next"); | |
var btn_prev = document.getElementById("btn_prev"); | |
var listing_table = document.getElementById("listingTable"); | |
var page_span = document.getElementById("page"); | |
// Validate page | |
if (page < 1) page = 1; | |
if (page > numPages()) page = numPages(); | |
listing_table.innerHTML = ""; | |
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) { | |
listing_table.innerHTML += objJson[i].childNodes[1] + "<br>"; | |
} | |
page_span.innerHTML = page; | |
if (page == 1) { | |
btn_prev.style.visibility = "hidden"; | |
} else { | |
btn_prev.style.visibility = "visible"; | |
} | |
if (page == numPages()) { | |
btn_next.style.visibility = "hidden"; | |
} else { | |
btn_next.style.visibility = "visible"; | |
} | |
} | |
function numPages() | |
{ | |
return Math.ceil(objJson.length / records_per_page); | |
} | |
window.onload = function() { | |
changePage(1); | |
}; | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"/> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<title>Students</title> | |
<link rel="stylesheet" href="css/reset.css"> | |
<link rel="stylesheet" href="css/design.css"> | |
</head> | |
<body> | |
<div id="listingTable"></div> | |
<a href="javascript:prevPage()" id="btn_prev">Prev</a> | |
<a href="javascript:nextPage()" id="btn_next">Next</a> | |
page: <span id="page"></span> | |
<div class="page"> | |
<div class="page-header cf"> | |
<h2>Students</h2> | |
</div> | |
<ul class="student-list"> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> | |
<h3>iboya vat</h3> | |
<span class="email">iboya.vat@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<\!-- Add new student for test --> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> | |
<h3>iboya colin</h3> | |
<span class="email">iboya.vat@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<\!-- End: Add new student for test --> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> | |
<h3>aapo niskanen</h3> | |
<span class="email">aapo.niskanen@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> | |
<h3>phillip cox</h3> | |
<span class="email">phillip.cox@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/11/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg"> | |
<h3>zilda moreira</h3> | |
<span class="email">zilda.moreira@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/15/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg"> | |
<h3>lilou le gall</h3> | |
<span class="email">lilou.le gall@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/16/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg"> | |
<h3>lucy hall</h3> | |
<span class="email">lucy.hall@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/11/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> | |
<h3>mark colin</h3> | |
<span class="email">mark.colin@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/14/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg"> | |
<h3>sara alves</h3> | |
<span class="email">sara.alves@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/19/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>ramon macrae</h3> | |
<span class="email">ramon.macrae@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/13/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg"> | |
<h3>connor taylor</h3> | |
<span class="email">connor.taylor@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/18/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg"> | |
<h3>aymeric morel</h3> | |
<span class="email">aymeric.morel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>lorenz otto</h3> | |
<span class="email">lorenz.otto@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/11/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> | |
<h3>karl williamson</h3> | |
<span class="email">karl.williamson@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/12/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> | |
<h3>ouassim heering</h3> | |
<span class="email">ouassim.heering@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/18/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>roberto molina</h3> | |
<span class="email">roberto.molina@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg"> | |
<h3>jordan hubert</h3> | |
<span class="email">jordan.hubert@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> | |
<h3>melvin baker</h3> | |
<span class="email">melvin.baker@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/18/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg"> | |
<h3>everett gordon</h3> | |
<span class="email">everett.gordon@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg"> | |
<h3>aiden ma</h3> | |
<span class="email">aiden.ma@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/18/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg"> | |
<h3>florent gerard</h3> | |
<span class="email">florent.gerard@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/12/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg"> | |
<h3>amber chen</h3> | |
<span class="email">amber.chen@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/12/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg"> | |
<h3>alexandra davies</h3> | |
<span class="email">alexandra.davies@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/11/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg"> | |
<h3>sergio cole</h3> | |
<span class="email">sergio.cole@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg"> | |
<h3>edgar dixon</h3> | |
<span class="email">edgar.dixon@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg"> | |
<h3>kirk myers</h3> | |
<span class="email">kirk.myers@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/17/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg"> | |
<h3>ani hesseling</h3> | |
<span class="email">ani.hesseling@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 08/14/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> | |
<h3>victoire bonnet</h3> | |
<span class="email">victoire.bonnet@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/13/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg"> | |
<h3>marcos morales</h3> | |
<span class="email">marcos.morales@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/12/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> | |
<h3>nils neumann</h3> | |
<span class="email">nils.neumann@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/11/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg"> | |
<h3>emily harrison</h3> | |
<span class="email">emily.harrison@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/18/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>matthew fortin</h3> | |
<span class="email">matthew.fortin@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/18/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg"> | |
<h3>charlotte steward</h3> | |
<span class="email">charlotte.steward@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> | |
<h3>marceau rodriguez</h3> | |
<span class="email">marceau.rodriguez@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/13/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>hudson anderson</h3> | |
<span class="email">hudson.anderson@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg"> | |
<h3>warren phillips</h3> | |
<span class="email">warren.phillips@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/11/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>leo niva</h3> | |
<span class="email">leo.niva@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/14/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> | |
<h3>hani prevoo</h3> | |
<span class="email">hani.prevoo@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/11/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg"> | |
<h3>veronica rodriguez</h3> | |
<span class="email">veronica.rodriguez@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/17/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> | |
<h3>ginestal das neves</h3> | |
<span class="email">ginestal.das neves@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/19/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> | |
<h3>devon barnes</h3> | |
<span class="email">devon.barnes@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/19/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg"> | |
<h3>brennan pierce</h3> | |
<span class="email">brennan.pierce@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/15/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> | |
<h3>zachary singh</h3> | |
<span class="email">zachary.singh@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/19/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> | |
<h3>arlo harris</h3> | |
<span class="email">arlo.harris@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 07/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg"> | |
<h3>hannah ginnish</h3> | |
<span class="email">hannah.ginnish@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/17/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg"> | |
<h3>goos brunt</h3> | |
<span class="email">goos.brunt@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 09/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> | |
<h3>eduard riedel</h3> | |
<span class="email">eduard.riedel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/12/15</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg"> | |
<h3>geesken jekel</h3> | |
<span class="email">geesken.jekel@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 02/12/13</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg"> | |
<h3>dolores ryan</h3> | |
<span class="email">dolores.ryan@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/17/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> | |
<h3>steven rogers</h3> | |
<span class="email">steven.rogers@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 01/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> | |
<h3>virgulino silva</h3> | |
<span class="email">virgulino.silva@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 03/18/11</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg"> | |
<h3>lucile bertrand</h3> | |
<span class="email">lucile.bertrand@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 06/13/16</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg"> | |
<h3>elsa lahti</h3> | |
<span class="email">elsa.lahti@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 04/15/12</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg"> | |
<h3>soline leclercq</h3> | |
<span class="email">soline.leclercq@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/12/14</span> | |
</div> | |
</li> | |
<li class="student-item cf"> | |
<div class="student-details"> | |
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg"> | |
<h3>henri kruse</h3> | |
<span class="email">henri.kruse@example.com</span> | |
</div> | |
<div class="joined-details"> | |
<span class="date">Joined 05/14/13</span> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<script src="js/list.js" charset="utf-8"><\/script> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">body{ | |
background-color: #e1f1f6; | |
font-family: Helvetica, sans-serif; | |
color: #222; | |
} | |
.page{ | |
margin: 50px auto; | |
width: 70%; | |
background-color: #fff; | |
border-radius: 5px; | |
padding: 50px; | |
} | |
.page-header{ | |
margin-bottom: 20px; | |
} | |
.page-header h2{ | |
float: left; | |
font-size: 22px; | |
text-transform: uppercase; | |
font-weight: bold; | |
color: #555; | |
} | |
.page-header .student-search{ | |
float: right; | |
} | |
.page-header .student-search input{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
} | |
.page-header .student-search button{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
background-color: #4ba6c3; | |
color: #fff | |
} | |
.student-list{} | |
.student-item{ | |
margin: 0 0 20px 0; | |
padding: 0 0 20px 0; | |
border-bottom: 1px solid #eaeaea; | |
} | |
.student-details{ | |
width: 50%; | |
float: left; | |
} | |
.student-details .avatar{ | |
width: 40px; | |
height: auto; | |
border-radius: 20px; | |
float: left; | |
margin-right: 14px | |
} | |
.student-details h3{ | |
margin: 4px 0 2px 0; | |
font-weight: bold; | |
color: #4ba6c3; | |
} | |
.student-details .email{ | |
color: #888; | |
font-size: 14px; | |
} | |
.joined-details{ | |
width: 50%; | |
float: left; | |
text-align: right; | |
} | |
.joined-details .date{ | |
margin-top: 15px; | |
display: block; | |
font-size: 14px; | |
color: #999; | |
} | |
.student-item:last-child{ | |
margin: 0; | |
padding: 0; | |
border-bottom: none; | |
} | |
.pagination{ | |
margin: 40px 0 0 0; | |
text-align: center; | |
} | |
.pagination li{ | |
display: inline; | |
cursor: pointer; | |
} | |
.pagination li a{ | |
border: 1px solid #eaeaea; | |
border-radius: 5px; | |
padding: 3px 8px; | |
text-decoration: none; | |
color: #4ba6c3; | |
} | |
.pagination li a.active, | |
.pagination li a:hover{ | |
background-color: #4ba6c3; | |
color: #fff; | |
} | |
/* Custom CSS */ | |
.hidden { | |
display: none; | |
} | |
.not-active { | |
display: none; | |
} | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
.cf:after { | |
content: "."; | |
visibility: hidden; | |
display: block; | |
height: 0; | |
clear: both; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var studentItem = document.getElementsByClassName('student-item cf'); | |
var current_page = 1; | |
var records_per_page = 2; | |
console.log(studentItem); | |
var objJson = Array.prototype.slice.call(studentItem); | |
//objJson.forEach(function(item, index, array) { | |
// console.log((item, index)); | |
//}); | |
function prevPage() | |
{ | |
if (current_page > 1) { | |
current_page--; | |
changePage(current_page); | |
} | |
} | |
function nextPage() | |
{ | |
if (current_page < numPages()) { | |
current_page++; | |
changePage(current_page); | |
} | |
} | |
function changePage(page) | |
{ | |
var btn_next = document.getElementById("btn_next"); | |
var btn_prev = document.getElementById("btn_prev"); | |
var listing_table = document.getElementById("listingTable"); | |
var page_span = document.getElementById("page"); | |
// Validate page | |
if (page < 1) page = 1; | |
if (page > numPages()) page = numPages(); | |
listing_table.innerHTML = ""; | |
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) { | |
listing_table.innerHTML += objJson[i].childNodes[1] + "<br>"; | |
} | |
page_span.innerHTML = page; | |
if (page == 1) { | |
btn_prev.style.visibility = "hidden"; | |
} else { | |
btn_prev.style.visibility = "visible"; | |
} | |
if (page == numPages()) { | |
btn_next.style.visibility = "hidden"; | |
} else { | |
btn_next.style.visibility = "visible"; | |
} | |
} | |
function numPages() | |
{ | |
return Math.ceil(objJson.length / records_per_page); | |
} | |
window.onload = function() { | |
changePage(1); | |
}; | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
background-color: #e1f1f6; | |
font-family: Helvetica, sans-serif; | |
color: #222; | |
} | |
.page{ | |
margin: 50px auto; | |
width: 70%; | |
background-color: #fff; | |
border-radius: 5px; | |
padding: 50px; | |
} | |
.page-header{ | |
margin-bottom: 20px; | |
} | |
.page-header h2{ | |
float: left; | |
font-size: 22px; | |
text-transform: uppercase; | |
font-weight: bold; | |
color: #555; | |
} | |
.page-header .student-search{ | |
float: right; | |
} | |
.page-header .student-search input{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
} | |
.page-header .student-search button{ | |
border-radius: 5px; | |
border: 1px solid #eaeaea; | |
padding: 8px 15px; | |
font-size: 14px; | |
background-color: #4ba6c3; | |
color: #fff | |
} | |
.student-list{} | |
.student-item{ | |
margin: 0 0 20px 0; | |
padding: 0 0 20px 0; | |
border-bottom: 1px solid #eaeaea; | |
} | |
.student-details{ | |
width: 50%; | |
float: left; | |
} | |
.student-details .avatar{ | |
width: 40px; | |
height: auto; | |
border-radius: 20px; | |
float: left; | |
margin-right: 14px | |
} | |
.student-details h3{ | |
margin: 4px 0 2px 0; | |
font-weight: bold; | |
color: #4ba6c3; | |
} | |
.student-details .email{ | |
color: #888; | |
font-size: 14px; | |
} | |
.joined-details{ | |
width: 50%; | |
float: left; | |
text-align: right; | |
} | |
.joined-details .date{ | |
margin-top: 15px; | |
display: block; | |
font-size: 14px; | |
color: #999; | |
} | |
.student-item:last-child{ | |
margin: 0; | |
padding: 0; | |
border-bottom: none; | |
} | |
.pagination{ | |
margin: 40px 0 0 0; | |
text-align: center; | |
} | |
.pagination li{ | |
display: inline; | |
cursor: pointer; | |
} | |
.pagination li a{ | |
border: 1px solid #eaeaea; | |
border-radius: 5px; | |
padding: 3px 8px; | |
text-decoration: none; | |
color: #4ba6c3; | |
} | |
.pagination li a.active, | |
.pagination li a:hover{ | |
background-color: #4ba6c3; | |
color: #fff; | |
} | |
/* Custom CSS */ | |
.hidden { | |
display: none; | |
} | |
.not-active { | |
display: none; | |
} | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
.cf:after { | |
content: "."; | |
visibility: hidden; | |
display: block; | |
height: 0; | |
clear: both; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var studentItem = document.getElementsByClassName('student-item cf'); | |
var current_page = 1; | |
var records_per_page = 2; | |
console.log(studentItem); | |
var objJson = Array.prototype.slice.call(studentItem); | |
//objJson.forEach(function(item, index, array) { | |
// console.log((item, index)); | |
//}); | |
function prevPage() | |
{ | |
if (current_page > 1) { | |
current_page--; | |
changePage(current_page); | |
} | |
} | |
function nextPage() | |
{ | |
if (current_page < numPages()) { | |
current_page++; | |
changePage(current_page); | |
} | |
} | |
function changePage(page) | |
{ | |
var btn_next = document.getElementById("btn_next"); | |
var btn_prev = document.getElementById("btn_prev"); | |
var listing_table = document.getElementById("listingTable"); | |
var page_span = document.getElementById("page"); | |
// Validate page | |
if (page < 1) page = 1; | |
if (page > numPages()) page = numPages(); | |
listing_table.innerHTML = ""; | |
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) { | |
listing_table.innerHTML += objJson[i].childNodes[1] + "<br>"; | |
} | |
page_span.innerHTML = page; | |
if (page == 1) { | |
btn_prev.style.visibility = "hidden"; | |
} else { | |
btn_prev.style.visibility = "visible"; | |
} | |
if (page == numPages()) { | |
btn_next.style.visibility = "hidden"; | |
} else { | |
btn_next.style.visibility = "visible"; | |
} | |
} | |
function numPages() | |
{ | |
return Math.ceil(objJson.length / records_per_page); | |
} | |
window.onload = function() { | |
changePage(1); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment