PageRenderTime 51ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/lib/backbone-paginator/backbone.paginator.js

https://bitbucket.org/drejc/backbone-tutorial
JavaScript | 310 lines | 218 code | 59 blank | 33 comment | 33 complexity | ea04543442ced31b92d5812c601804d3 MD5 | raw file
  1. /*globals Backbone:true, _:true, jQuery:true*/
  2. Backbone.Paginator = (function ( Backbone, _, $ ) {
  3. "use strict";
  4. var Paginator = {};
  5. Paginator.version = "0.15";
  6. // @name: clientPager
  7. //
  8. // @tagline: Paginator for client-side data
  9. //
  10. // @description:
  11. // This paginator is responsible for providing pagination
  12. // and sort capabilities for a single payload of data
  13. // we wish to paginate by the UI for easier browsering.
  14. //
  15. Paginator.clientPager = Backbone.Collection.extend({
  16. sync: function ( method, model, options ) {
  17. var queryMap = {};
  18. queryMap[this.perPageAttribute] = this.perPage;
  19. queryMap[this.skipAttribute] = this.page * this.perPage;
  20. queryMap[this.orderAttribute] = this.sortField;
  21. queryMap[this.customAttribute1] = this.customParam1;
  22. queryMap[this.formatAttribute] = this.format;
  23. queryMap[this.customAttribute2] = this.customParam2;
  24. queryMap[this.queryAttribute] = this.query;
  25. var params = _.extend({
  26. type: 'GET',
  27. dataType: 'jsonp',
  28. jsonpCallback: 'callback',
  29. data: decodeURIComponent($.param(queryMap)),
  30. url: this.url,
  31. processData: false
  32. }, options);
  33. return $.ajax(params);
  34. },
  35. nextPage: function () {
  36. this.page = ++this.page;
  37. this.pager();
  38. },
  39. previousPage: function () {
  40. this.page = --this.page || 1;
  41. this.pager();
  42. },
  43. goTo: function ( page ) {
  44. if(page !== undefined){
  45. this.page = parseInt(page, 10);
  46. this.pager();
  47. }
  48. },
  49. howManyPer: function ( perPage ) {
  50. if(perPage !== undefined){
  51. this.displayPerPage = parseInt(perPage, 10);
  52. this.page = 1;
  53. this.pager();
  54. }
  55. },
  56. // where 'column' is the key to sort on
  57. setSort: function ( column, direction ) {
  58. if(column !==undefined && direction !==undefined){
  59. this.pager(column, direction);
  60. }
  61. },
  62. pager: function ( sort, direction ) {
  63. var self = this,
  64. disp = this.displayPerPage,
  65. start = (self.page - 1) * disp,
  66. stop = start + disp;
  67. if (self.origModels === undefined) {
  68. self.origModels = self.models;
  69. }
  70. self.models = self.origModels;
  71. if (sort) {
  72. self.models = self._sort(self.models, sort, direction);
  73. }
  74. self.reset(self.models.slice(start, stop));
  75. },
  76. _sort: function ( models, sort, direction ) {
  77. models = models.sort(function (a, b) {
  78. var ac = a.get(sort),
  79. bc = b.get(sort);
  80. if (direction === 'desc') {
  81. if (ac > bc) {
  82. return -1;
  83. }
  84. if (ac < bc) {
  85. return 1;
  86. }
  87. } else {
  88. if (ac < bc) {
  89. return -1;
  90. }
  91. if (ac > bc) {
  92. return 1;
  93. }
  94. }
  95. return 0;
  96. });
  97. return models;
  98. },
  99. info: function () {
  100. var self = this,
  101. info = {},
  102. totalRecords = (self.origModels) ? self.origModels.length : self.length,
  103. totalPages = Math.ceil(totalRecords / self.displayPerPage);
  104. info = {
  105. totalRecords: totalRecords,
  106. page: self.page,
  107. perPage: this.displayPerPage,
  108. totalPages: totalPages,
  109. lastPage: totalPages,
  110. lastPagem1: totalPages - 1,
  111. previous: false,
  112. next: false,
  113. page_set: [],
  114. startRecord: (self.page - 1) * this.displayPerPage + 1,
  115. endRecord: Math.min(totalRecords, self.page * this.displayPerPage)
  116. };
  117. if (self.page > 1) {
  118. info.prev = self.page - 1;
  119. }
  120. if (self.page < info.totalPages) {
  121. info.next = self.page + 1;
  122. }
  123. info.pageSet = self.setPagination(info);
  124. self.information = info;
  125. return info;
  126. },
  127. setPagination: function ( info ) {
  128. var pages = [], i = 0, l = 0;
  129. // How many adjacent pages should be shown on each side?
  130. var ADJACENT = 3,
  131. ADJACENTx2 = ADJACENT * 2,
  132. LASTPAGE = Math.ceil(info.totalRecords / info.perPage),
  133. LPM1 = -1;
  134. if (LASTPAGE > 1) {
  135. // not enough pages to bother breaking it up
  136. if (LASTPAGE < (7 + ADJACENTx2)) {
  137. for (i = 1, l = LASTPAGE; i <= l; i++) {
  138. pages.push(i);
  139. }
  140. }
  141. // enough pages to hide some
  142. else if (LASTPAGE > (5 + ADJACENTx2)) {
  143. //close to beginning; only hide later pages
  144. if (info.page < (1 + ADJACENTx2)) {
  145. for (i = 1, l = 4 + ADJACENTx2; i < l; i++) {
  146. pages.push(i);
  147. }
  148. }
  149. // in middle; hide some front and some back
  150. else if (LASTPAGE - ADJACENTx2 > info.page && info.page > ADJACENTx2) {
  151. for (i = info.page - ADJACENT; i <= info.page + ADJACENT; i++) {
  152. pages.push(i);
  153. }
  154. }
  155. // close to end; only hide early pages
  156. else {
  157. for (i = LASTPAGE - (2 + ADJACENTx2); i <= LASTPAGE; i++) {
  158. pages.push(i);
  159. }
  160. }
  161. }
  162. }
  163. return pages;
  164. }
  165. });
  166. // @name: requestPager
  167. //
  168. // Paginator for server-side data being requested from a backend/API
  169. //
  170. // @description:
  171. // This paginator is responsible for providing pagination
  172. // and sort capabilities for requests to a server-side
  173. // data service (e.g an API)
  174. //
  175. Paginator.requestPager = Backbone.Collection.extend({
  176. sync: function ( method, model, options ) {
  177. var queryMap = {}, params;
  178. queryMap[this.perPageAttribute] = this.perPage;
  179. queryMap[this.skipAttribute] = this.page * this.perPage;
  180. queryMap[this.orderAttribute] = this.sortField;
  181. queryMap[this.customAttribute1] = this.customParam1;
  182. queryMap[this.formatAttribute] = this.format;
  183. queryMap[this.customAttribute2] = this.customParam2;
  184. queryMap[this.queryAttribute] = this.query;
  185. params = _.extend({
  186. type: 'GET',
  187. dataType: 'jsonp',
  188. jsonpCallback: 'callback',
  189. data: decodeURIComponent($.param(queryMap)),
  190. url: this.url,
  191. processData: false
  192. }, options);
  193. return $.ajax(params);
  194. },
  195. requestNextPage: function () {
  196. if ( this.page !== undefined ) {
  197. this.page += 1;
  198. // customize as needed. For the Netflix API, skipping ahead based on
  199. // page * number of results per page was necessary. You may have a
  200. // simpler server-side pagination API where just updating
  201. // the 'page' value is all you need to do.
  202. // This applies similarly to requestPreviousPage()
  203. this.pager();
  204. }
  205. },
  206. requestPreviousPage: function () {
  207. if ( this.page !== undefined ) {
  208. this.page -= 1;
  209. this.pager();
  210. }
  211. },
  212. updateOrder: function ( column ) {
  213. if (column !== undefined) {
  214. this.sortField = column;
  215. this.pager();
  216. }
  217. },
  218. goTo: function ( page ) {
  219. if(page !== undefined){
  220. this.page = parseInt(page, 10);
  221. this.pager();
  222. }
  223. },
  224. howManyPer: function ( count ) {
  225. if( count !== undefined ){
  226. this.page = this.firstPage;
  227. this.perPage = count;
  228. this.pager();
  229. }
  230. },
  231. sort: function () {
  232. //assign to as needed.
  233. },
  234. info: function () {
  235. var info = {
  236. page: this.page,
  237. firstPage: this.firstPage,
  238. totalPages: this.totalPages,
  239. lastPage: this.totalPages,
  240. perPage: this.perPage
  241. };
  242. this.information = info;
  243. return info;
  244. },
  245. // fetches the latest results from the server
  246. pager: function () {
  247. this.fetch({});
  248. }
  249. });
  250. return Paginator;
  251. }( Backbone, _, jQuery ));