pagination.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /*=========================================================================================
  2. File Name: pagination.js
  3. Description: Provide pagination links for your site or app with the multi-page
  4. pagination component.
  5. ----------------------------------------------------------------------------------------
  6. Item Name: Robust - Responsive Admin Theme
  7. Version: 1.2
  8. Author: GeeksLabs
  9. Author URL: http://www.themeforest.net/user/geekslabs
  10. ==========================================================================================*/
  11. (function(window, document, $) {
  12. 'use strict';
  13. $('.page1-links').twbsPagination({
  14. totalPages: 5,
  15. visiblePages: 4,
  16. prev: 'Prev',
  17. first: null,
  18. last: null,
  19. onPageClick: function (event, page) {
  20. $('#page1-content').text('You are on Page ' + page);
  21. $(".pagination").find('li').addClass('page-item');
  22. $(".pagination").find('a').addClass("page-link");
  23. }
  24. });
  25. $('.page2-links').twbsPagination({
  26. totalPages: 5,
  27. visiblePages: 4,
  28. prev: 'Prev',
  29. first: null,
  30. last: null,
  31. onPageClick: function (event, page) {
  32. $('#page2-content').text('You are on Page ' + page);
  33. $(".pagination").find('li').addClass('page-item');
  34. $(".pagination").find('a').addClass("page-link");
  35. }
  36. });
  37. $('.page3-links').twbsPagination({
  38. totalPages: 5,
  39. visiblePages: 4,
  40. prev: 'Prev',
  41. first: null,
  42. last: null,
  43. onPageClick: function (event, page) {
  44. $('#page3-content').text('You are on Page ' + page);
  45. $(".pagination").find('li').addClass('page-item');
  46. $(".pagination").find('a').addClass("page-link");
  47. }
  48. });
  49. $('.firstLast1-links').twbsPagination({
  50. totalPages: 5,
  51. visiblePages: 4,
  52. prev: 'Prev',
  53. first: 'First',
  54. last: 'Last',
  55. onPageClick: function (event, page) {
  56. $('#firstLast1-content').text('You are on Page ' + page);
  57. $(".pagination").find('li').addClass('page-item');
  58. $(".pagination").find('a').addClass("page-link");
  59. }
  60. });
  61. $('.firstLast2-links').twbsPagination({
  62. totalPages: 5,
  63. visiblePages: 4,
  64. prev: 'Prev',
  65. first: 'First',
  66. last: 'Last',
  67. onPageClick: function (event, page) {
  68. $('#firstLast2-content').text('You are on Page ' + page);
  69. $(".pagination").find('li').addClass('page-item');
  70. $(".pagination").find('a').addClass("page-link");
  71. }
  72. });
  73. $('.firstLast3-links').twbsPagination({
  74. totalPages: 5,
  75. visiblePages: 4,
  76. prev: 'Prev',
  77. first: 'First',
  78. last: 'Last',
  79. onPageClick: function (event, page) {
  80. $('#firstLast3-content').text('You are on Page ' + page);
  81. $(".pagination").find('li').addClass('page-item');
  82. $(".pagination").find('a').addClass("page-link");
  83. }
  84. });
  85. $('.start-links').twbsPagination({
  86. totalPages: 10,
  87. visiblePages: 6,
  88. startPage : 5,
  89. prev: 'Prev',
  90. first: 'First',
  91. last: 'Last',
  92. onPageClick: function (event, page) {
  93. $('#start-content').text('Your start Page ' + page);
  94. $(".pagination").find('li').addClass('page-item');
  95. $(".pagination").find('a').addClass("page-link");
  96. }
  97. });
  98. $('.loop-links').twbsPagination({
  99. totalPages: 5,
  100. visiblePages: 5,
  101. prev: 'Prev',
  102. first: 'First',
  103. last: 'Last',
  104. loop: true,
  105. onPageClick: function (event, page) {
  106. $('#loop-content').text('You are on Page ' + page);
  107. $(".pagination").find('li').addClass('page-item');
  108. $(".pagination").find('a').addClass("page-link");
  109. }
  110. });
  111. $('.url-links').twbsPagination({
  112. totalPages: 10,
  113. visiblePages: 5,
  114. prev: 'Prev',
  115. first: 'First',
  116. last: 'Last',
  117. href: '?page={{page}}',
  118. onPageClick: function (event, page) {
  119. $('#url-content').text('You are on Page ' + page);
  120. $(".pagination").find('li').addClass('page-item');
  121. $(".pagination").find('a').addClass("page-link");
  122. }
  123. });
  124. $('.url1-links').twbsPagination({
  125. totalPages: 10,
  126. visiblePages: 5,
  127. prev: 'Prev',
  128. first: 'First',
  129. last: 'Last',
  130. href: '?page={{page}}&#url1-content',
  131. hrefVariable: '{{page}}',
  132. onPageClick: function (event, page) {
  133. $('#url1-content').text('You are on Page ' + page);
  134. $(".pagination").find('li').addClass('page-item');
  135. $(".pagination").find('a').addClass("page-link");
  136. }
  137. });
  138. $('.synchronized-links').twbsPagination({
  139. totalPages: 15,
  140. visiblePages: 6,
  141. prev: 'Prev',
  142. first: 'First',
  143. last: 'Last',
  144. onPageClick: function (event, page) {
  145. $('#synchronized-content').text('You are on Page ' + page);
  146. $(".pagination").find('li').addClass('page-item');
  147. $(".pagination").find('a').addClass("page-link");
  148. }
  149. });
  150. $('.default-paginator').datepaginator({
  151. itemWidth: 60,
  152. navItemWidth: 20,
  153. });
  154. // Format
  155. $('.paginator-format').datepaginator({
  156. itemWidth: 60,
  157. navItemWidth: 20,
  158. text: 'Do<br>ddd'
  159. });
  160. // Hide calendar
  161. $('.paginator-calendar').datepaginator({
  162. itemWidth: 60,
  163. navItemWidth: 20,
  164. showCalendar: false
  165. });
  166. // Highlight date
  167. $('.paginator-highlight').datepaginator({
  168. itemWidth: 60,
  169. navItemWidth: 20,
  170. highlightSelectedDate: false
  171. });
  172. // Highlight today's date
  173. $('.paginator-highlight-today').datepaginator({
  174. itemWidth: 60,
  175. navItemWidth: 20,
  176. highlightToday: false
  177. });
  178. // Change Selected Date
  179. $('.paginator-selectedDate').datepaginator({
  180. itemWidth: 60,
  181. navItemWidth: 20,
  182. selectedDate: moment().add(10, 'days')
  183. });
  184. // Hide OffDays
  185. $('.paginator-showoffDays').datepaginator({
  186. itemWidth: 60,
  187. navItemWidth: 20,
  188. showOffDays: false
  189. });
  190. // Change OffDays
  191. $('.paginator-offDays').datepaginator({
  192. itemWidth: 60,
  193. navItemWidth: 20,
  194. offDays: 'Sun'
  195. });
  196. // Hide StartOfWeek Use divider
  197. $('.paginator-showStartOfWeek').datepaginator({
  198. itemWidth: 60,
  199. navItemWidth: 20,
  200. showStartOfWeek: false
  201. });
  202. // Hint
  203. $('.paginator-hint').datepaginator({
  204. itemWidth: 60,
  205. navItemWidth: 20,
  206. hint: 'Do MMMM YYYY'
  207. });
  208. // Small Size
  209. $('.paginator-small').datepaginator({
  210. itemWidth: 60,
  211. navItemWidth: 20,
  212. size: 'small'
  213. });
  214. // Large Size
  215. $('.paginator-large').datepaginator({
  216. itemWidth: 60,
  217. navItemWidth: 20,
  218. size: 'large'
  219. });
  220. })(window, document, jQuery);