abonnes.jsp 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  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. $('.tooltipped').tooltip();
  54. },
  55. });
  56. // Detection changement page
  57. $('main').on('click', '.pagination-' + idPagination + '-prev', function () {
  58. console.log(idPagination, 'prev', $(this).attr('data-page'));
  59. loader.open();
  60. $.ajax({
  61. type: "GET",
  62. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  63. error: () => {
  64. loader.close();
  65. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  66. },
  67. success: (result) => {
  68. loader.close();
  69. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  70. $('.tooltipped').tooltip();
  71. },
  72. });
  73. });
  74. $('main').on('click', '.pagination-' + idPagination + '-next', function () {
  75. console.log('abo', 'next', $(this).attr('data-page'));
  76. loader.open();
  77. $.ajax({
  78. type: "GET",
  79. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  80. error: () => {
  81. loader.close();
  82. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  83. },
  84. success: (result) => {
  85. loader.close();
  86. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  87. $('.tooltipped').tooltip();
  88. },
  89. });
  90. });
  91. $('main').on('click', '.pagination-' + idPagination + '-number', function () {
  92. console.log('abo', 'num', $(this).attr('data-page'));
  93. loader.open();
  94. $.ajax({
  95. type: "GET",
  96. url: "${base}api/usager/page/" + $(this).attr('data-page') + "/" + perPage + "/formatted/pagination",
  97. error: () => {
  98. loader.close();
  99. $("#abo").html('<h3 class="red-text">Impossible de charger les usager</h3>');
  100. },
  101. success: (result) => {
  102. loader.close();
  103. pagination(idPagination, $(this).attr('data-page'), perPage, result.data.total, $('#abo'), $('#pagination-abo'), result.data.list, null, 'action');
  104. $('.tooltipped').tooltip();
  105. },
  106. });
  107. });
  108. });
  109. </script>
  110. </body>
  111. </html>