page.ejs 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <style>
  2. ul.pagination {
  3. text-align: center!important;
  4. justify-content: center!important;
  5. }
  6. </style>
  7. <nav aria-label="Page navigation example">
  8. <ul class="pagination pagination-sm"></ul>
  9. </nav>
  10. <script type="text/javascript" src="/public/js/bootstrap/bootstrap-paginator.js"></script>
  11. <script type="text/javascript">
  12. let options = {
  13. bootstrapMajorVersion: 4,
  14. currentPage: "<%= pageInfo.page %>",
  15. totalPages: "<%= pageInfo.total %>",
  16. numberOfPages: 5,
  17. size: "small",
  18. itemContainerClass: function(type, page, current) {
  19. let className = 'page-item';
  20. this.currentPage = parseInt(this.currentPage);
  21. this.totalPages = parseInt(this.totalPages);
  22. switch (type) {
  23. case "first":
  24. className = this.currentPage === 1 ? className + ' disabled' : className;
  25. break;
  26. case "prev":
  27. className = this.currentPage === 1 ? className + ' disabled' : className;
  28. break;
  29. case "next":
  30. className = this.currentPage === this.totalPages ? className + ' disabled' : className;
  31. break;
  32. case "last":
  33. className = this.currentPage === this.totalPages ? className + ' disabled' : className;
  34. break;
  35. case "page":
  36. className = page === this.currentPage ? className + ' active' : className;
  37. break;
  38. }
  39. return className;
  40. },
  41. itemContentClass: function(type, page, current) {
  42. return 'page-link';
  43. },
  44. itemTexts: function(type, page, current) {
  45. switch (type) {
  46. case "first":
  47. return '<i class="fa fa-caret-left"></i>';
  48. case "prev":
  49. return '<i class="fa fa-angle-left"></i>';
  50. case "next":
  51. return '<i class="fa fa-angle-right"></i>';
  52. case "last":
  53. return '<i class="fa fa-caret-right"></i>';
  54. case "page":
  55. return page;
  56. case "more":
  57. return '...';
  58. }
  59. },
  60. shouldShowPage: function (type, page, current) {
  61. let result = true;
  62. switch (type) {
  63. case "first":
  64. break;
  65. case "prev":
  66. break;
  67. case "next":
  68. break;
  69. case "last":
  70. break;
  71. case "page":
  72. break;
  73. case "more":
  74. result = (page !== this.totalPages);
  75. break;
  76. }
  77. return result;
  78. },
  79. pageUrl: function(type, page, current){
  80. let queryData = JSON.parse('<%- pageInfo.queryData %>');
  81. // 如果没有附带查询条件则直接返回
  82. if (Object.keys(queryData).length <= 0) {
  83. return "?page=" + page;
  84. }
  85. // 有其它数据则重新赋值page,然后组合字符串
  86. queryData.page = page;
  87. let queryArray = [];
  88. for(let tmp in queryData) {
  89. let tempString = tmp + '=' + queryData[tmp];
  90. queryArray.push(tempString);
  91. }
  92. let firstQuery = queryArray.shift();
  93. let queryString = queryArray.join('&');
  94. return queryString === '' ? '?' + firstQuery : '?' + firstQuery + '&' + queryString;
  95. }
  96. };
  97. if (options.totalPages > 1) {
  98. $(".pagination").bootstrapPaginator(options);
  99. } else {
  100. $(".pagination").hide();
  101. }
  102. </script>