Browse Source

Amélioration Pagination

Arthur Brandao 5 years ago
parent
commit
9b7a1d0d2e
3 changed files with 114 additions and 70 deletions
  1. 66 66
      WebContent/abonnes.jsp
  2. 22 4
      WebContent/js/script.js
  3. 26 0
      src/microfolie/entry/rest/UsagerController.java

+ 66 - 66
WebContent/abonnes.jsp

@@ -1,7 +1,15 @@
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 	pageEncoding="UTF-8"%>
-<%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html>
+<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
+<%@ taglib prefix="s" uri="/struts-tags"%>
+<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 
+<c:set var="req" value="${pageContext.request}" />
+<c:set var="url">${req.requestURL}</c:set>
+<c:set var="base" value="${fn:substring(url, 0, fn:length(url) - fn:length(req.requestURI))}${req.contextPath}/" />
+
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -96,6 +104,9 @@
             </div>
         </div>
     </footer>
+    
+    <!--  Loader  -->
+    <tag:loader name="loader" />
 
     <!-- Script -->
     <script type="text/javascript" src="js/jquery.min.js"></script>
@@ -103,80 +114,69 @@
     <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'
+        $(document).ready(() => {
+        	const loader = M.Modal.getInstance($('#loader'));
+        	const idPagination = 'usager';
+        	const perPage = 2;
+        	
+        	loader.open();
+        	$.ajax({
+                type: "GET",
+                url: "${base}api/usager/page/1/" + perPage + "/formatted/pagination",
+                error: () => {
+                	loader.close();
                 },
-                {
-                    'nom': 'Pandragron',
-                    'prenom': 'Artoria',
-                    'ville': 'Lens',
-                    'email': 'apandra@sab.er'
-                }
-            ],
-            [
-            {
-                    'nom': 'Shepard',
-                    'prenom': 'John',
-                    'ville': 'Lens',
-                    'email': 'j-shepard@sr2.normandy.fr'
+                success: (result) => {
+                	loader.close();
+                	pagination(idPagination, 1, perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
                 },
-                {
-                    '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 () {
+            $('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]);
+                loader.open();
+                $.ajax({
+                    type: "GET",
+                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
+                    error: () => {
+                    	loader.close();
+                    },
+                    success: (result) => {
+                    	loader.close();
+                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
+                    },
+                });
             });
-            $('main').on('click', `.pagination-${idPagination}-next`, function () {
+            $('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]);
+                loader.open();
+                $.ajax({
+                    type: "GET",
+                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
+                    error: () => {
+                    	loader.close();
+                    },
+                    success: (result) => {
+                    	loader.close();
+                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
+                    },
+                });
             });
-            $('main').on('click', `.pagination-${idPagination}-number`, function () {
+            $('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]);
+                loader.open();
+                $.ajax({
+                    type: "GET",
+                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
+                    error: () => {
+                    	loader.close();
+                    },
+                    success: (result) => {
+                    	loader.close();
+                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
+                    },
+                });
             });
         });
     </script>

+ 22 - 4
WebContent/js/script.js

@@ -19,7 +19,7 @@ function getCookie(key) {
     return cookies;
 }
 
-function pagination(id, pageNum, perPage, total, tabElt, paginationElt, dataPage, tableClass) {
+function pagination(id, pageNum, perPage, total, tabElt, paginationElt, dataPage, tableClass, last) {
     pageNum = parseInt(pageNum);
     perPage = parseInt(perPage);
     total = parseInt(total);
@@ -31,17 +31,35 @@ function pagination(id, pageNum, perPage, total, tabElt, paginationElt, dataPage
     dataPage.forEach(elt => {
         if(first) {
             tab += '<thead><tr>';
+            let lastKey;
             for (const key in elt) {
-                keys.push(key);
-                tab += `<th>${key.capitalize()}</th>`;
+            	// Garde la derniere clef pour la fin
+            	if (last != key) {
+            		keys.push(key);
+                    tab += `<th>${key.capitalize()}</th>`;
+            	} else {
+            		lastKey = key;
+            	}
+            }
+            // Si il y a une derniere clef on l'ajoute
+            if (lastKey) {
+            	keys.push(lastKey);
+                tab += `<th>${lastKey.capitalize()}</th>`;
             }
             tab += '</tr></thead><tbody>';
             first = false;
         }
         tab += '<tr>';
         keys.forEach(key => {
-            tab += `<td style="width: ${Math.round((1/keys.length)*100)}%;">${elt[key]}</td>`;
+        	// Garde la valeur de la derniere clef pour la fin
+        	if (last != key) {
+        		tab += `<td style="width: ${Math.round((1/keys.length)*100)}%;">${elt[key]}</td>`;
+        	}
         });
+        // Ajoute la valeur de la derniere clef
+        if (last && keys.indexOf(last) !== -1) {
+        	tab += `<td style="width: ${Math.round((1/keys.length)*100)}%;">${elt[last]}</td>`;
+        }
         tab += '</tr>';
     });
     tab += '</tbody></table>';

+ 26 - 0
src/microfolie/entry/rest/UsagerController.java

@@ -1,5 +1,6 @@
 package microfolie.entry.rest;
 
+import java.util.List;
 import java.util.logging.Logger;
 
 import javax.ws.rs.GET;
@@ -11,6 +12,7 @@ import org.json.JSONArray;
 import org.json.JSONObject;
 
 import microfolie.service.UsagerService;
+import microfolie.service.dto.UsagerDTO;
 import microfolie.utils.JsonUtils;
 
 @Path("/usager")
@@ -31,5 +33,29 @@ public class UsagerController {
 		LOGGER.info("End: Usager page");
 		return JsonUtils.success(data).toString();
 	}
+	
+	@GET
+	@Path("/page/{num}/{perPage}/formatted/pagination")
+	public String pageForPagination(@PathParam("num") int num, @PathParam("perPage") int perPage) {
+		LOGGER.info("Begin: Usager page (num: " + num + ", perPage: " + perPage + ")");
+		JSONObject data = new JSONObject();
+		// Récupération info
+		data.put("total", service.getTotalNumber());
+		List<UsagerDTO> usagers = service.getPage(num, perPage);
+		// Formattage des données
+		JSONArray list = new JSONArray();
+		usagers.forEach(elt -> {
+			JSONObject json = new JSONObject();
+			json.put("nom", elt.getNom());
+			json.put("prenom", elt.getPrenom());
+			json.put("email", elt.getEmail());
+			json.put("ville", elt.getVille());
+			json.put("action", "<a href='scan/generate.jsp?code=" + elt.getCode() + "'><i class='material-icons'>center_focus_strong</i></a>");
+			list.put(json);
+		});
+		data.put("list", list);
+		LOGGER.info("End: Usager page");
+		return JsonUtils.success(data).toString();
+	}
 
 }