abonnes.jsp 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
  4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  5. <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  6. <c:set var="req" value="${pageContext.request}" />
  7. <c:set var="url">${req.requestURL}</c:set>
  8. <c:set var="base" value="${fn:substring(url, 0, fn:length(url) - fn:length(req.requestURI))}${req.contextPath}/" />
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <tag:head title="Abonnés" />
  13. </head>
  14. <body class="grey lighten-3">
  15. <!-- Header -->
  16. <tag:header active="abonnes" />
  17. <!-- Main -->
  18. <main class="container">
  19. <div class="row">
  20. <div class="col s12 center-align">
  21. <h3>Abonn&eacute;s</h3>
  22. </div>
  23. </div>
  24. <div class="row">
  25. <div id="abo" class="col s12 center-align"></div>
  26. </div>
  27. <div class="row">
  28. <div id="pagination-abo" class="col s12 center-align"></div>
  29. </div>
  30. </main>
  31. <!-- Footer -->
  32. <tag:footer />
  33. <!-- Loader -->
  34. <tag:loader name="loader" />
  35. <!-- Script -->
  36. <tag:script />
  37. <script type="text/javascript">
  38. $(document).ready(() => {
  39. const loader = M.Modal.getInstance($('#loader'));
  40. const idPagination = 'usager';
  41. const perPage = 5;
  42. loader.open();
  43. $.ajax({
  44. type: "GET",
  45. url: "${base}api/usager/page/1/" + perPage + "/formatted/pagination",
  46. error: () => {
  47. loader.close();
  48. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  49. },
  50. success: (result) => {
  51. loader.close();
  52. pagination(idPagination, 1, perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  53. },
  54. });
  55. // Detection changement page
  56. $('main').on('click', '.pagination-' + idPagination + '-prev', function () {
  57. console.log(idPagination, 'prev', $(this).attr('data-page'));
  58. loader.open();
  59. $.ajax({
  60. type: "GET",
  61. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  62. error: () => {
  63. loader.close();
  64. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  65. },
  66. success: (result) => {
  67. loader.close();
  68. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  69. },
  70. });
  71. });
  72. $('main').on('click', '.pagination-' + idPagination + '-next', function () {
  73. console.log('abo', 'next', $(this).attr('data-page'));
  74. loader.open();
  75. $.ajax({
  76. type: "GET",
  77. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  78. error: () => {
  79. loader.close();
  80. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  81. },
  82. success: (result) => {
  83. loader.close();
  84. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  85. },
  86. });
  87. });
  88. $('main').on('click', '.pagination-' + idPagination + '-number', function () {
  89. console.log('abo', 'num', $(this).attr('data-page'));
  90. loader.open();
  91. $.ajax({
  92. type: "GET",
  93. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  94. error: () => {
  95. loader.close();
  96. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  97. },
  98. success: (result) => {
  99. loader.close();
  100. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  101. },
  102. });
  103. });
  104. });
  105. </script>
  106. </body>
  107. </html>