Amelioration pagination

WebContent/abonnes.jsp

@@ -48,72 +48,50 @@
         	const idPagination = 'usager';
         	const perPage = 5;
         	
-        	loader.open();
-        	$.ajax({
-                type: "GET",
-                url: "${base}api/usager/page/1/" + perPage + "/formatted/pagination",
-                error: () => {
-                	loader.close();
-                	$("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
-                },
-                success: (result) => {
-                	loader.close();
-                	pagination(idPagination, 1, perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
-                	$('.tooltipped').tooltip();
-                },
-            });
-
-            // Detection changement page
-            $('main').on('click', '.pagination-' + idPagination + '-prev', function () {
-                console.log(idPagination, 'prev', $(this).attr('data-page'));
-                loader.open();
+        	function pagine(numPage) {
+        		loader.open();
                 $.ajax({
                     type: "GET",
-                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
+                    url: "${base}api/usager/page/" + numPage + "/" + perPage + "/formatted/pagination",
                     error: () => {
                     	loader.close();
-                    	$("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
+                    	pagination(idPagination, numPage, perPage, 0, $('#abo'), $('#pagination-abo'), []);
+                		let html = '<tr>';
+                		html += '<td class="right-align red-text" width="40%"><i class="material-icons" style="font-size:4em;padding-top:.3em;">error</i></td>';
+                		html += '<td class="left-align red-text" width="60%"><h4>Impossible de charger les usage</td>';
+                		html += '</tr>';
+                		$('#pagination-' + idPagination + '-table').html(html);
                     },
                     success: (result) => {
                     	loader.close();
-                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
-                    	$('.tooltipped').tooltip();
+                    	if (result.data.list.length > 0) {
+                    		pagination(idPagination, numPage, perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, 'responsive-table striped', 'action');
+                        	$('.tooltipped').tooltip();
+                    	} else {
+                    		pagination(idPagination, numPage, perPage, 0, $('#abo'), $('#pagination-abo'), []);
+                    		let html = '<tr>';
+                    		html += '<td class="right-align blue-text" width="40%"><i class="material-icons" style="font-size:4em;padding-top:.3em;">info</i></td>';
+                    		html += '<td class="left-align blue-text" width="60%"><h4>Aucun usager</td>';
+                    		html += '</tr>';
+                    		$('#pagination-' + idPagination + '-table').html(html);
+                    	}
                     },
                 });
+        	};
+        	
+			pagine(1);
+            // Detection changement page
+            $('main').on('click', '.pagination-' + idPagination + '-prev', function () {
+                console.log(idPagination, 'prev', $(this).attr('data-page'));
+                pagine($(this).attr('data-page'));
             });
             $('main').on('click', '.pagination-' + idPagination + '-next', function () {
                 console.log('abo', 'next', $(this).attr('data-page'));
-                loader.open();
-                $.ajax({
-                    type: "GET",
-                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
-                    error: () => {
-                    	loader.close();
-                    	$("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
-                    },
-                    success: (result) => {
-                    	loader.close();
-                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
-                    	$('.tooltipped').tooltip();
-                    },
-                });
+                pagine($(this).attr('data-page'));
             });
             $('main').on('click', '.pagination-' + idPagination + '-number', function () {
                 console.log('abo', 'num', $(this).attr('data-page'));
-                loader.open();
-                $.ajax({
-                    type: "GET",
-                    url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
-                    error: () => {
-                    	loader.close();
-                    	$("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
-                    },
-                    success: (result) => {
-                    	loader.close();
-                    	pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
-                    	$('.tooltipped').tooltip();
-                    },
-                });
+                pagine($(this).attr('data-page'));
             });
         });
     </script>

WebContent/js/script.js

@@ -25,7 +25,7 @@ function pagination(id, pageNum, perPage, total, tabElt, paginationElt, dataPage
     total = parseInt(total);
     tableClass = tableClass || 'striped';
     // Création du tableau
-    let tab = `<table class="${tableClass}">`;
+    let tab = `<table id="pagination-${id}-table" class="${tableClass}">`;
     let first = true;
     let keys = [];
     dataPage.forEach(elt => {
@@ -78,7 +78,7 @@ function pagination(id, pageNum, perPage, total, tabElt, paginationElt, dataPage
             pagination += `<li class="waves-effect"><span class="pagination-${id}-number" data-page="${i}">${i}</span></li>`;
         }
     }
-    if(pageNum == nbPage) {
+    if(pageNum == nbPage || total == 0) {
         pagination += '<li class="disabled"><span><i class="material-icons">chevron_right</i></span></li>';
     } else {
         pagination += `<li class="waves-effect"><span class="pagination-${id}-next" data-page="${pageNum + 1}"><i class="material-icons">chevron_right</i></span></li>`;