Advertisement
ryanharne

ES6/JS Pagination Listing with buffer

Nov 18th, 2021
1,290
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * @var Boolean paginationMaxList  The length of list to print
  3.  **/
  4. const paginationMaxList = 10;
  5.  
  6. /**
  7.  * Identify if pagination list-item should be shown, while keeping consistent count of list-items.
  8.  *
  9.  * @param Integer renderingPage  Page Number to Render
  10.  * @param Integer currentPage    Current Page Number
  11.  * @param Integer currentPage    Maximum Page Number
  12.  *
  13.  * @return Boolean               Flag to render list for said renderingPage
  14.  **/
  15. const renderPagination = (renderingPage = 1, currentPage = 1, lastPagination = 1) => {
  16.   const paginationBuffer = Math.ceil(paginationMaxList / 2);
  17.  
  18.   if (
  19.     (renderingPage < 0) ||
  20.     (renderingPage > lastPagination)
  21.   ) {
  22.     return false;
  23.   }
  24.   else {
  25.     if (
  26.       (
  27.         ((currentPage - paginationBuffer) >= renderingPage) ||
  28.         ((currentPage + paginationBuffer) < renderingPage)
  29.       ) &&
  30.       (!(
  31.         (
  32.           (renderingPage > currentPage) &&
  33.           (renderingPage <= paginationMaxList)
  34.         ) ||
  35.         (
  36.           (renderingPage < currentPage) &&
  37.           (renderingPage > (lastPagination - paginationMaxList))
  38.         )
  39.       ))
  40.     ) {
  41.       return false;
  42.     }
  43.   }
  44.  
  45.   return true;
  46. }
  47.  
  48. // Test print pagination listing to show
  49. const maxPage = 32;
  50. for (let currentPage=1; currentPage <= maxPage; currentPage++) {
  51.   const shownPagi = [];
  52.   for (let page=1; page <= maxPage; page++) {
  53.     if (renderPagination(page, currentPage, maxPage)) {
  54.     shownPagi.push(page);
  55.     }
  56.   }
  57.   console.log('shownPagi', {count: shownPagi.length, currentPage, shownPagi});
  58. }
  59.  
  60. // console
  61. shownPagi {"count":10,"currentPage":1,"shownPagi":[1,2,3,4,5,6,7,8,9,10]}
  62. shownPagi {"count":10,"currentPage":2,"shownPagi":[1,2,3,4,5,6,7,8,9,10]}
  63. shownPagi {"count":10,"currentPage":3,"shownPagi":[1,2,3,4,5,6,7,8,9,10]}
  64. shownPagi {"count":10,"currentPage":4,"shownPagi":[1,2,3,4,5,6,7,8,9,10]}
  65. shownPagi {"count":10,"currentPage":5,"shownPagi":[1,2,3,4,5,6,7,8,9,10]}
  66. shownPagi {"count":10,"currentPage":6,"shownPagi":[2,3,4,5,6,7,8,9,10,11]}
  67. shownPagi {"count":10,"currentPage":7,"shownPagi":[3,4,5,6,7,8,9,10,11,12]}
  68. shownPagi {"count":10,"currentPage":8,"shownPagi":[4,5,6,7,8,9,10,11,12,13]}
  69. shownPagi {"count":10,"currentPage":9,"shownPagi":[5,6,7,8,9,10,11,12,13,14]}
  70. shownPagi {"count":10,"currentPage":10,"shownPagi":[6,7,8,9,10,11,12,13,14,15]}
  71. shownPagi {"count":10,"currentPage":11,"shownPagi":[7,8,9,10,11,12,13,14,15,16]}
  72. shownPagi {"count":10,"currentPage":12,"shownPagi":[8,9,10,11,12,13,14,15,16,17]}
  73. shownPagi {"count":10,"currentPage":13,"shownPagi":[9,10,11,12,13,14,15,16,17,18]}
  74. shownPagi {"count":10,"currentPage":14,"shownPagi":[10,11,12,13,14,15,16,17,18,19]}
  75. shownPagi {"count":10,"currentPage":15,"shownPagi":[11,12,13,14,15,16,17,18,19,20]}
  76. shownPagi {"count":10,"currentPage":16,"shownPagi":[12,13,14,15,16,17,18,19,20,21]}
  77. shownPagi {"count":10,"currentPage":17,"shownPagi":[13,14,15,16,17,18,19,20,21,22]}
  78. shownPagi {"count":10,"currentPage":18,"shownPagi":[14,15,16,17,18,19,20,21,22,23]}
  79. shownPagi {"count":10,"currentPage":19,"shownPagi":[15,16,17,18,19,20,21,22,23,24]}
  80. shownPagi {"count":10,"currentPage":20,"shownPagi":[16,17,18,19,20,21,22,23,24,25]}
  81. shownPagi {"count":10,"currentPage":21,"shownPagi":[17,18,19,20,21,22,23,24,25,26]}
  82. shownPagi {"count":10,"currentPage":22,"shownPagi":[18,19,20,21,22,23,24,25,26,27]}
  83. shownPagi {"count":10,"currentPage":23,"shownPagi":[19,20,21,22,23,24,25,26,27,28]}
  84. shownPagi {"count":10,"currentPage":24,"shownPagi":[20,21,22,23,24,25,26,27,28,29]}
  85. shownPagi {"count":10,"currentPage":25,"shownPagi":[21,22,23,24,25,26,27,28,29,30]}
  86. shownPagi {"count":10,"currentPage":26,"shownPagi":[22,23,24,25,26,27,28,29,30,31]}
  87. shownPagi {"count":10,"currentPage":27,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  88. shownPagi {"count":10,"currentPage":28,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  89. shownPagi {"count":10,"currentPage":29,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  90. shownPagi {"count":10,"currentPage":30,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  91. shownPagi {"count":10,"currentPage":31,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  92. shownPagi {"count":10,"currentPage":32,"shownPagi":[23,24,25,26,27,28,29,30,31,32]}
  93.  
  94.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement