javascript - Pagination withOUT jQuery. How can I select a range of elements with the same class? Does my logic make any sense? -
i working on project , want create pagination feature list of students. there 54 students , want show no more 10 per page.
the class of list (ul) "student-list" , class of individual students (li) "student-item".
of course, need create buttons @ bottom of page link respective pages.
my intuition tells me link each button number. if button pressed display required range of students.
i want setting student-item's hidden. based on button clicked, can set range of student-item's visible. how can this? possible without jquery?
here pseudocode. please not give away!:
//problem: shows many people per page //solution: incorporate pagination , add search functionality var studenttotal = document.getelementsbyclassname("student-item").length; var pagecount = math.ceil(studenttotal/10); var pagenum; var buttonnum = pagecount; console.log(studenttotal); console.log(pagecount); //add pagination feature var displaypage = function() { //display first 10 students on initial page view, first 10 .student-items of .studentlist //hide first 10 students when page loads var divstoshow = document.getelementsbyclassname("student-item"); //display buttons createbutton(); //active button = page number } //create enough buttons amount of page numbers var createbutton = function() { //add button list div, .pagination unordered list //create button(li) every page number } //bind eventhandler button action display page var bindbutton = function() { } //if user clicks on 2 in pagination, students 11-20 shown etc. var buttonclick = function() { //simple animation when transitioning between pages //call displaypage displaypage(); } here 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 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> <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> <div class="pagination"> <ul> </ul> </div> </body> <script type="text/javascript" src="js/app.js"></script> </html> here example of pagination html buttons should if have 5 buttons:
<div class="pagination"> <ul> <li> <a class="active" href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> </ul> </div>
vanillajs display student items 10-19 , hide rest:
var studentitems = document.queryselectorall('li.student-item'); array.prototype.foreach.call(studentitems, function(e, i) { e.style.display = (i >= 10 && < 20) ? 'block' : 'none'; }); you can generalise showpage(page) function.
Comments
Post a Comment