<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="css/material-icons.css" /> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <link type="text/css" rel="stylesheet" href="css/style.min.css" media="screen,projection" /> <link rel="icon" href="img/favicon.ico" /> <title>Abonnes - Microfolie Lens</title> </head> <body class="grey lighten-3"> <s:url var="inscriptionurl" action="gotoinscription"/> <s:url var="abonnesurl" action="gotoabonnes"/> <s:url var="settingsurl" action="gotosettings"/> <!-- Header --> <header class="navbar-fixed"> <nav class="red"> <div class="nav-wrapper"> <a href="./" class="brand-logo center mtop-half hide-on-med-and-down"><img src="img/logo.png" title="Logo Microfolie" class="responsive-img" style="max-width: 128px;" /></a> <a href="./" class="brand-logo center hide-on-large-only">Microfolie Lens</a> <a href="#!" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a> <div class="left mleft-2 hide-on-med-and-down"> <a href="./"> <h5>Microfolie Lens</h5> </a> </div> <ul class="right mright-2 hide-on-med-and-down"> <li class="active"><a href="#">Abonnés</a></li> <li><a href="${inscriptionurl}">Inscription</a></li> <li><a href="${settingsurl}">Paramétrage espace</a></li> </ul> </div> </nav> </header> <!-- Header Mobile --> <ul class="sidenav" id="mobile-nav"> <li class="center-align mtop-1"> <img src="img/logo.png" title="Logo Microfolie" class="responsive-img" style="max-height: 150px;" /> </li> <li class="center-align"> <h4>Microfolie Lens</h4> <hr /> </li> <li class="active"><a href="#">Abonnés</a></li> <li><a href="${inscriptionurl}">Inscription</a></li> <li><a href="${settingsurl}">Paramétrage espace</a></li> </ul> <div class="mtop-5 hide-on-med-and-down"></div> <!-- Main --> <main class="container"> <div class="row"> <div class="col s12 center-align"> <h3>Abonnés</h3> </div> </div> <div class="row"> <div id="abo" class="col s12 center-align"></div> </div> <div class="row"> <div id="pagination-abo" class="col s12 center-align"></div> </div> </main> <!-- Footer --> <footer class="page-footer red"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Microfolie Lens</h5> <p class="grey-text text-lighten-4">Bla bla bla ...</p> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">Liens utiles</h5> <ul> <li><a class="grey-text text-lighten-3" href="./">Accueil</a></li> <li><a class="grey-text text-lighten-3" href="#apropos">Qui somme nous</a></li> <li><a class="grey-text text-lighten-3" href="#mention">Mentions légales</a></li> <li><a class="grey-text text-lighten-3" href="#contact">Contact</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2019 Copyright Text <a class="grey-text text-lighten-4 right" href="https://villedelens.fr" target="_blank">Ville de Lens</a> </div> </div> </footer> <!-- Script --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- Script pour cette page--> <script type="text/javascript"> var data = [ [ { 'nom': 'Mollin', 'prenom': 'Jean', 'ville': 'Lens', 'email': 'jmollin@email.fr' }, { 'nom': 'Mollin', 'prenom': 'Emillie', 'ville': 'Lens', 'email': 'emollin@email.fr' }, { 'nom': 'Reuli', 'prenom': 'Robert', 'ville': 'Lens', 'email': 'robert.reuli@mail.com' } ], [ { 'nom': 'Dufour', 'prenom': 'George', 'ville': 'Lens', 'email': 'dufour-george@email.fr' }, { 'nom': 'Ellestou', 'prenom': 'Jeanne', 'ville': 'Lens', 'email': 'j.ellestou@entreprise.net' }, { 'nom': 'Pandragron', 'prenom': 'Artoria', 'ville': 'Lens', 'email': 'apandra@sab.er' } ], [ { 'nom': 'Shepard', 'prenom': 'John', 'ville': 'Lens', 'email': 'j-shepard@sr2.normandy.fr' }, { 'nom': 'Notece', 'prenom': 'Lea', 'ville': 'Lens', 'email': 'lea@notece.fr' } ] ] const idPagination = 'abo'; $(document).ready(() => { pagination(idPagination, 1, 3, 8, $('#abo'), $('#pagination-abo'), data[0]); // Detection changement page $('main').on('click', `.pagination-${idPagination}-prev`, function () { console.log(idPagination, 'prev', $(this).attr('data-page')); pagination(idPagination, $(this).attr('data-page'), 4, 12, $('#abo'), $('#pagination-abo'), data[$(this).attr('data-page') - 1]); }); $('main').on('click', `.pagination-${idPagination}-next`, function () { console.log('abo', 'next', $(this).attr('data-page')); pagination(idPagination, $(this).attr('data-page'), 4, 12, $('#abo'), $('#pagination-abo'), data[$(this).attr('data-page') - 1]); }); $('main').on('click', `.pagination-${idPagination}-number`, function () { console.log('abo', 'num', $(this).attr('data-page')); pagination(idPagination, $(this).attr('data-page'), 4, 12, $('#abo'), $('#pagination-abo'), data[$(this).attr('data-page') - 1]); }); }); </script> </body> </html>