PageRenderTime 50ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/chapters/10-pagination.md

https://github.com/xiaoyukid/backbone-fundamentals
Markdown | 549 lines | 384 code | 165 blank | 0 comment | 0 complexity | ff8735afb5ab30386e098bd6bf20f476 MD5 | raw file
  1. # Paginating Backbone.js Requests & Collections
  2. ## Introduction
  3. Pagination is a ubiquitous problem we often find ourselves needing to solve on the web - perhaps most predominantly when working with service APIs and JavaScript-heavy clients which consume them. It's also a problem that is often under-refined as most of us consider pagination relatively easy to get right. This isn't however always the case as pagination tends to get more tricky than it initially seems.
  4. Before we dive into solutions for paginating data for your Backbone applications, let's define exactly what we consider pagination to be:
  5. Pagination is a control system allowing users to browse through pages of search results (or any type of content) which is continued. Search results are the canonical example, but pagination today is found on news sites, blogs, and discussion boards, often in the form of Previous and Next links. More complete pagination systems offer granular control of the specific pages you can navigate to, giving the user more power to find what they are looking for.
  6. It isn't a problem limited to pages requiring some visual controls for pagination either - sites like Facebook, Pinterest, and Twitter have demonstrated that there are many contexts where infinite paging is also useful. Infinite paging is, of course, when we pre-fetch (or appear to pre-fetch) content from a subsequent page and add it directly to the user’s current page, making the experience feel "infinite".
  7. Pagination is very context-specific and depends on the content being displayed. In the Google search results, pagination is important as they want to offer you the most relevant set of results in the first 1-2 pages. After that, you might be a little more selective (or random) with the page you choose to navigate to. This differs from cases where you'll want to cycle through consecutive pages for (e.g., for a news article or blog post).
  8. Pagination is almost certainly content and context-specific, but as Faruk Ates has [previously](https://gist.github.com/mislav/622561) pointed out the principles of good pagination apply no matter what the content or context is. As with everything extensible when it comes to Backbone, you can write your own pagination to address many of these content-specific types of pagination problems. That said, you'll probably spend quite a bit of time on this and sometimes you just want to use a tried and tested solution that just works.
  9. On this topic, we're going to go through a set of pagination components I (and a group of [contributors](https://github.com/addyosmani/backbone.paginator/contributors)) wrote for Backbone.js, which should hopefully come in useful if you're working on applications which need to page Backbone Collections. They're part of an extension called [Backbone.Paginator](http://github.com/addyosmani/backbone.paginator).
  10. ### Backbone.Paginator
  11. When working with data on the client-side, the three types of pagination we are most likely to run into are:
  12. **Requests to a service layer (API)** - For example, query for results containing the term 'Paul' - if 5,000 results are available only display 20 results per page (leaving us with 250 possible result pages that can be navigated to).
  13. This problem actually has quite a great deal more to it, such as maintaining persistence of other URL parameters (e.g sort, query, order) which can change based on a user's search configuration in a UI. One also has to think of a clean way of hooking views up to this pagination so you can easily navigate between pages (e.g., First, Last, Next, Previous, 1,2,3), manage the number of results displayed per page and so on.
  14. **Further client-side pagination of data returned -** e.g we've been returned a JSON response containing 100 results. Rather than displaying all 100 to the user, we only display 20 of these results within a navigable UI in the browser.
  15. Similar to the request problem, client-pagination has its own challenges like navigation once again (Next, Previous, 1,2,3), sorting, order, switching the number of results to display per page and so on.
  16. **Infinite results** - with services such as Facebook, the concept of numeric pagination is instead replaced with a 'Load More' or 'View More' button. Triggering this normally fetches the next 'page' of N results but rather than replacing the previous set of results loaded entirely, we simply append to them instead.
  17. A request pager which simply appends results in a view rather than replacing on each new fetch is effectively an 'infinite' pager.
  18. **Let's now take a look at exactly what we're getting out of the box:**
  19. Backbone.Paginator is a set of opinionated components for paginating collections of data using Backbone.js. It aims to provide both solutions for assisting with pagination of requests to a server (e.g an API) as well as pagination of single-loads of data, where we may wish to further paginate a collection of N results into M pages within a view.
  20. ![](img/paginator-ui.png)
  21. Backbone.Paginator supports two main pagination components:
  22. * **Backbone.Paginator.requestPager**: For pagination of requests between a client and a server-side API
  23. * **Backbone.Paginator.clientPager**: For pagination of data returned from a server which you would like to further paginate within the UI (e.g 60 results are returned, paginate into 3 pages of 20)
  24. ### Live Examples
  25. If you would like to look at examples built using the components included in the project, links to official demos are included below and use the Netflix API so that you can see them working with an actual data source.
  26. * [Backbone.Paginator.requestPager()](http://addyosmani.github.com/backbone.paginator/examples/netflix-request-paging/index.html)
  27. * [Backbone.Paginator.clientPager()](http://addyosmani.github.com/backbone.paginator/examples/netflix-client-paging/index.html)
  28. * [Infinite Pagination (Backbone.Paginator.requestPager())](http://addyosmani.github.com/backbone.paginator/examples/netflix-infinite-paging/index.html)
  29. * [Diacritic Plugin](http://addyosmani.github.com/backbone.paginator/examples/google-diacritic/index.html)
  30. ##Paginator.requestPager
  31. In this section we're going to walk through using the requestPager. You would use this component when working with a service API which itself supports pagination. This component allows users to control the pagination settings for requests to this API (i.e navigate to the next, previous, N pages) via the client-side.
  32. The idea is that pagination, searching, and filtering of data can all be done from your Backbone application without the need for a page reload.
  33. ![](img/paginator-request.png)
  34. ####1. Create a new Paginated collection
  35. First, we define a new Paginated collection using `Backbone.Paginator.requestPager()` as follows:
  36. ```javascript
  37. var PaginatedCollection = Backbone.Paginator.requestPager.extend({
  38. ```
  39. ####2. Set the model for the collection as normal
  40. Within our collection, we then (as normal) specify the model to be used with this collection followed by the URL (or base URL) for the service providing our data (e.g the Netflix API).
  41. ```javascript
  42. model: model,
  43. ```
  44. ####3. Configure the base URL and the type of the request
  45. We need to set a base URL. The `type` of the request is `GET` by default, and the `dataType` is `jsonp` in order to enable cross-domain requests.
  46. ```javascript
  47. paginator_core: {
  48. // the type of the request (GET by default)
  49. type: 'GET',
  50. // the type of reply (jsonp by default)
  51. dataType: 'jsonp',
  52. // the URL (or base URL) for the service
  53. // if you want to have a more dynamic URL, you can make this a function
  54. // that returns a string
  55. url: 'http://odata.netflix.com/Catalog/People(49446)/TitlesActedIn?'
  56. },
  57. ```
  58. ## Gotchas!
  59. If you use `dataType` **NOT** jsonp, please remove the callback custom parameter inside the `server_api` configuration.
  60. ####4. Configure how the library will show the results
  61. We need to tell the library how many items per page we would like to see, etc...
  62. ```javascript
  63. paginator_ui: {
  64. // the lowest page index your API allows to be accessed
  65. firstPage: 0,
  66. // which page should the paginator start from
  67. // (also, the actual page the paginator is on)
  68. currentPage: 0,
  69. // how many items per page should be shown
  70. perPage: 3,
  71. // a default number of total pages to query in case the API or
  72. // service you are using does not support providing the total
  73. // number of pages for us.
  74. // 10 as a default in case your service doesn't return the total
  75. totalPages: 10
  76. },
  77. ```
  78. ####5. Configure the parameters we want to send to the server
  79. Only the base URL won't be enough for most cases, so you can pass more parameters to the server.
  80. Note how you can use functions instead of hardcoded values, and you can also refer to the values you specified in `paginator_ui`.
  81. ```javascript
  82. server_api: {
  83. // the query field in the request
  84. '$filter': '',
  85. // number of items to return per request/page
  86. '$top': function() { return this.perPage },
  87. // how many results the request should skip ahead to
  88. // customize as needed. For the Netflix API, skipping ahead based on
  89. // page * number of results per page was necessary.
  90. '$skip': function() { return this.currentPage * this.perPage },
  91. // field to sort by
  92. '$orderby': 'ReleaseYear',
  93. // what format would you like to request results in?
  94. '$format': 'json',
  95. // custom parameters
  96. '$inlinecount': 'allpages',
  97. '$callback': 'callback'
  98. },
  99. ```
  100. ## Gotchas!
  101. If you use `$callback`, please ensure that you did use the jsonp as a `dataType` inside your `paginator_core` configuration.
  102. ####6. Finally, configure Collection.parse() and we're done
  103. The last thing we need to do is configure our collection's `parse()` method. We want to ensure we're returning the correct part of our JSON response containing the data our collection will be populated with, which below is `response.d.results` (for the Netflix API).
  104. You might also notice that we're setting `this.totalPages` to the total page count returned by the API. This allows us to define the maximum number of (result) pages available for the current/last request so that we can clearly display this in the UI. It also allows us to influence whether clicking say, a 'next' button should proceed with a request or not.
  105. ```javascript
  106. parse: function (response) {
  107. // Be sure to change this based on how your results
  108. // are structured (e.g d.results is Netflix specific)
  109. var tags = response.d.results;
  110. //Normally this.totalPages would equal response.d.__count
  111. //but as this particular NetFlix request only returns a
  112. //total count of items for the search, we divide.
  113. this.totalPages = Math.ceil(response.d.__count / this.perPage);
  114. return tags;
  115. }
  116. });
  117. });
  118. ```
  119. ####Convenience methods:
  120. For your convenience, the following methods are made available for use in your views to interact with the `requestPager`:
  121. * **Collection.goTo( n, options )** - go to a specific page
  122. * **Collection.nextPage( options )** - go to the next page
  123. * **Collection.prevPage( options )** - go to the previous page
  124. * **Collection.howManyPer( n )** - set the number of items to display per page
  125. **requestPager** collection's methods `.goTo()`, `.nextPage()` and `.prevPage()` are all extensions of the original [Backbone Collection.fetch() methods](http://documentcloud.github.com/backbone/#Collection-fetch). As so, they all can take the same option object as a parameter.
  126. This option object can use `success` and `error` parameters to pass a function to be executed after server answer.
  127. ```javascript
  128. Collection.goTo(n, {
  129. success: function( collection, response ) {
  130. // called is server request success
  131. },
  132. error: function( collection, response ) {
  133. // called if server request fail
  134. }
  135. });
  136. ```
  137. To manage callback, you could also use the [jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR) returned by these methods to manage callback.
  138. ```javascript
  139. Collection
  140. .requestNextPage()
  141. .done(function( data, textStatus, jqXHR ) {
  142. // called is server request success
  143. })
  144. .fail(function( data, textStatus, jqXHR ) {
  145. // called if server request fail
  146. })
  147. .always(function( data, textStatus, jqXHR ) {
  148. // do something after server request is complete
  149. });
  150. });
  151. ```
  152. If you'd like to add the incoming models to the current collection, instead of replacing the collection's contents, pass `{update: true, remove: false}` as options to these methods.
  153. ```javascript
  154. Collection.prevPage({ update: true, remove: false });
  155. ```
  156. ##Paginator.clientPager
  157. The clientPager is used to further paginate data that has already been returned by the service API. Say you've requested 100 results from the service and wish to split this into 5 pages of paginated results, each containing 20 results at a client level - the clientPager makes it trivial to do this.
  158. ![](img/paginator-client.png)
  159. Use the clientPager when you prefer to get results in a single "load" and thus avoid making additional network requests each time your users want to fetch the next "page" of items. As the results have all already been requested, it's just a case of switching between the ranges of data actually presented to the user.
  160. ####1. Create a new paginated collection with a model and URL
  161. As with `requestPager`, let's first create a new Paginated `Backbone.Paginator.clientPager` collection, with a model:
  162. ```javascript
  163. var PaginatedCollection = Backbone.Paginator.clientPager.extend({
  164. model: model,
  165. ```
  166. ####2. Configure the base URL and the type of the request
  167. We need to set a base URL. The `type` of the request is `GET` by default, and the `dataType` is `jsonp` in order to enable cross-domain requests.
  168. ```javascript
  169. paginator_core: {
  170. // the type of the request (GET by default)
  171. type: 'GET',
  172. // the type of reply (jsonp by default)
  173. dataType: 'jsonp',
  174. // the URL (or base URL) for the service
  175. url: 'http://odata.netflix.com/v2/Catalog/Titles?&'
  176. },
  177. ```
  178. ####3. Configure how the library will show the results
  179. We need to tell the library how many items per page we would like to see, etc...
  180. ```javascript
  181. paginator_ui: {
  182. // the lowest page index your API allows to be accessed
  183. firstPage: 1,
  184. // which page should the paginator start from
  185. // (also, the actual page the paginator is on)
  186. currentPage: 1,
  187. // how many items per page should be shown
  188. perPage: 3,
  189. // a default number of total pages to query in case the API or
  190. // service you are using does not support providing the total
  191. // number of pages for us.
  192. // 10 as a default in case your service doesn't return the total
  193. totalPages: 10,
  194. // The total number of pages to be shown as a pagination
  195. // list is calculated by (pagesInRange * 2) + 1.
  196. pagesInRange: 4
  197. },
  198. ```
  199. ####4. Configure the parameters we want to send to the server
  200. Only the base URL won't be enough for most cases, so you can pass more parameters to the server.
  201. Note how you can use functions instead of hardcoded values, and you can also refer to the values you specified in `paginator_ui`.
  202. ```javascript
  203. server_api: {
  204. // the query field in the request
  205. '$filter': 'substringof(\'america\',Name)',
  206. // number of items to return per request/page
  207. '$top': function() { return this.perPage },
  208. // how many results the request should skip ahead to
  209. // customize as needed. For the Netflix API, skipping ahead based on
  210. // page * number of results per page was necessary.
  211. '$skip': function() { return this.currentPage * this.perPage },
  212. // field to sort by
  213. '$orderby': 'ReleaseYear',
  214. // what format would you like to request results in?
  215. '$format': 'json',
  216. // custom parameters
  217. '$inlinecount': 'allpages',
  218. '$callback': 'callback'
  219. },
  220. ```
  221. ####5. Finally, configure Collection.parse() and we're done
  222. And finally we have our `parse()` method, which in this case isn't concerned with the total number of result pages available on the server as we have our own total count of pages for the paginated data in the UI.
  223. ```javascript
  224. parse: function (response) {
  225. var tags = response.d.results;
  226. return tags;
  227. }
  228. });
  229. ```
  230. ####Convenience methods:
  231. As mentioned, your views can hook into a number of convenience methods to navigate around UI-paginated data. For `clientPager` these include:
  232. * **Collection.goTo(n, options)** - go to a specific page
  233. * **Collection.prevPage(options)** - go to the previous page
  234. * **Collection.nextPage(options)** - go to the next page
  235. * **Collection.howManyPer(n)** - set how many items to display per page
  236. * **Collection.setSort(sortBy, sortDirection)** - update sort on the current view. Sorting will automatically detect if you're trying to sort numbers (even if they're strored as strings) and will do the right thing.
  237. * **Collection.setFilter(filterFields, filterWords)** - filter the current view. Filtering supports multiple words without any specific order, so you'll basically get a full-text search ability. Also, you can pass it only one field from the model, or you can pass an array with fields and all of them will get filtered. Last option is to pass it an object containing a comparison method and rules. Currently, only ```levenshtein``` method is available.
  238. The `goTo()`, `prevPage()`, and `nextPage()` functions do not require the `options` param since they will be executed synchronously. However, when specified, the success callback will be invoked before the function returns. For example:
  239. ```javascript
  240. nextPage(); // this works just fine!
  241. nextPage({success: function() { }}); // this will call the success function
  242. ```
  243. The options param exists to preserve (some) interface unification between the requestPaginator and clientPaginator so that they may be used interchangeably in your Backbone.Views.
  244. ```javascript
  245. this.collection.setFilter(
  246. {'Name': {cmp_method: 'levenshtein', max_distance: 7}}
  247. , "Amreican P" // Note the switched 'r' and 'e', and the 'P' from 'Pie'
  248. );
  249. ```
  250. Also note that the Levenshtein plugin should be loaded and enabled using the ```useLevenshteinPlugin``` variable.
  251. Last but not less important: performing Levenshtein comparison returns the ```distance``` between two strings. It won't let you *search* lengthy text.
  252. The distance between two strings means the number of characters that should be added, removed or moved to the left or to the right so the strings get equal.
  253. That means that comparing "Something" in "This is a test that could show something" will return 32, which is bigger than comparing "Something" and "ABCDEFG" (9).
  254. Use Levenshtein only for short texts (titles, names, etc).
  255. * **Collection.doFakeFilter(filterFields, filterWords)** - returns the models count after fake-applying a call to ```Collection.setFilter```.
  256. * **Collection.setFieldFilter(rules)** - filter each value of each model according to `rules` that you pass as argument. Example: You have a collection of books with 'release year' and 'author'. You can filter only the books that were released between 1999 and 2003. And then you can add another `rule` that will filter those books only to authors who's name start with 'A'. Possible rules: function, required, min, max, range, minLength, maxLength, rangeLength, oneOf, equalTo, containsAllOf, pattern. Passing this an empty rules set will remove any FieldFilter rules applied.
  257. ```javascript
  258. my_collection.setFieldFilter([
  259. {field: 'release_year', type: 'range', value: {min: '1999', max: '2003'}},
  260. {field: 'author', type: 'pattern', value: new RegExp('A*', 'igm')}
  261. ]);
  262. //Rules:
  263. //
  264. //var my_var = 'green';
  265. //
  266. //{field: 'color', type: 'equalTo', value: my_var}
  267. //{field: 'color', type: 'function', value: function(field_value){ return field_value == my_var; } }
  268. //{field: 'color', type: 'required'}
  269. //{field: 'number_of_colors', type: 'min', value: '2'}
  270. //{field: 'number_of_colors', type: 'max', value: '4'}
  271. //{field: 'number_of_colors', type: 'range', value: {min: '2', max: '4'} }
  272. //{field: 'color_name', type: 'minLength', value: '4'}
  273. //{field: 'color_name', type: 'maxLength', value: '6'}
  274. //{field: 'color_name', type: 'rangeLength', value: {min: '4', max: '6'}}
  275. //{field: 'color_name', type: 'oneOf', value: ['green', 'yellow']}
  276. //{field: 'color_name', type: 'pattern', value: new RegExp('gre*', 'ig')}
  277. //{field: 'color_name', type: 'containsAllOf', value: ['green', 'yellow', 'blue']}
  278. ```
  279. * **Collection.doFakeFieldFilter(rules)** - returns the models count after fake-applying a call to ```Collection.setFieldFilter```.
  280. ####Implementation notes:
  281. You can use some variables in your ```View``` to represent the actual state of the paginator.
  282. * ```totalUnfilteredRecords``` - Contains the number of records, including all records filtered in any way. (Only available in ```clientPager```)
  283. * ```totalRecords``` - Contains the number of records
  284. * ```currentPage``` - The actual page were the paginator is at.
  285. * ```perPage``` - The number of records the paginator will show per page.
  286. * ```totalPages``` - The number of total pages.
  287. * ```startRecord``` - The position of the first record shown in the current page (eg 41 to 50 from 2000 records) (Only available in ```clientPager```)
  288. * ```endRecord``` - The position of the last record shown in the current page (eg 41 to 50 from 2000 records) (Only available in ```clientPager```)
  289. * ```pagesInRange``` - The number of pages to be drawn on each side of the current page. So if ```pagesInRange``` is 3 and ```currentPage``` is 13 you will get the numbers 10, 11, 12, 13(selected), 14, 15, 16.
  290. ```html
  291. <!-- sample template for pagination UI -->
  292. <script type="text/html" id="tmpServerPagination">
  293. <div class="row-fluid">
  294. <div class="pagination span8">
  295. <ul>
  296. <% _.each (pageSet, function (p) { %>
  297. <% if (currentPage == p) { %>
  298. <li class="active"><span><%= p %></span></li>
  299. <% } else { %>
  300. <li><a href="#" class="page"><%= p %></a></li>
  301. <% } %>
  302. <% }); %>
  303. </ul>
  304. </div>
  305. <div class="pagination span4">
  306. <ul>
  307. <% if (currentPage > firstPage) { %>
  308. <li><a href="#" class="serverprevious">Previous</a></li>
  309. <% }else{ %>
  310. <li><span>Previous</span></li>
  311. <% }%>
  312. <% if (currentPage < totalPages) { %>
  313. <li><a href="#" class="servernext">Next</a></li>
  314. <% } else { %>
  315. <li><span>Next</span></li>
  316. <% } %>
  317. <% if (firstPage != currentPage) { %>
  318. <li><a href="#" class="serverfirst">First</a></li>
  319. <% } else { %>
  320. <li><span>First</span></li>
  321. <% } %>
  322. <% if (totalPages != currentPage) { %>
  323. <li><a href="#" class="serverlast">Last</a></li>
  324. <% } else { %>
  325. <li><span>Last</span></li>
  326. <% } %>
  327. </ul>
  328. </div>
  329. </div>
  330. <span class="cell serverhowmany"> Show <a href="#"
  331. class="selected">18</a> | <a href="#" class="">9</a> | <a href="#" class="">12</a> per page
  332. </span>
  333. <span class="divider">/</span>
  334. <span class="cell first records">
  335. Page: <span class="label"><%= currentPage %></span> of <span class="label"><%= totalPages %></span> shown
  336. </span>
  337. </script>
  338. ```
  339. ### Plugins
  340. **Diacritic.js**
  341. A plugin for Backbone.Paginator that replaces diacritic characters (`´`, `˝`, `̏`, `˚`,`~` etc.) with characters that match them most closely. This is particularly useful for filtering.
  342. ![](img/paginator-dia.png)
  343. To enable the plugin, set `this.useDiacriticsPlugin` to true, as can be seen in the example below:
  344. ```javascript
  345. Paginator.clientPager = Backbone.Collection.extend({
  346. // Default values used when sorting and/or filtering.
  347. initialize: function(){
  348. this.useDiacriticsPlugin = true; // use diacritics plugin if available
  349. ...
  350. ```
  351. ### Bootstrapping
  352. By default, both the clientPager and requestPager will make an initial request to the server in order to populate their internal paging data. In order to avoid this additional request, it may be beneficial to bootstrap your Backbone.Paginator instance from data that already exists in the dom.
  353. **Backbone.Paginator.clientPager:**
  354. ```javascript
  355. // Extend the Backbone.Paginator.clientPager with your own configuration options
  356. var MyClientPager = Backbone.Paginator.clientPager.extend({paginator_ui: {}});
  357. // Create an instance of your class and populate with the models of your entire collection
  358. var aClientPager = new MyClientPager([{id: 1, title: 'foo'}, {id: 2, title: 'bar'}]);
  359. // Invoke the bootstrap function
  360. aClientPager.bootstrap();
  361. ```
  362. Note: If you intend to bootstrap a clientPager, there is no need to specify a 'paginator_core' object in your configuration (since you should have already populated the clientPager with the entirety of it's necessary data)
  363. **Backbone.Paginator.requestPager:**
  364. ```javascript
  365. // Extend the Backbone.Paginator.requestPager with your own configuration options
  366. var MyRequestPager = Backbone.Paginator.requestPager.extend({paginator_ui: {}});
  367. // Create an instance of your class with the first page of data
  368. var aRequestPager = new MyRequestPager([{id: 1, title: 'foo'}, {id: 2, title: 'bar'}]);
  369. // Invoke the bootstrap function and configure requestPager with 'totalRecords'
  370. aRequestPager.bootstrap({totalRecords: 50});
  371. ```
  372. Note: Both the clientPager and requestPager ```bootstrap``` function will accept an options param that will be extended by your Backbone.Paginator instance. However the 'totalRecords' property will be set implicitly by the clientPager.
  373. [More on Backbone bootstrapping](http://ricostacruz.com/backbone-patterns/#bootstrapping_data)
  374. ### Styling
  375. You're of course free to customize the overall look and feel of the paginators as much as you wish. By default, all sample applications make use of the [Twitter Bootstrap](http://twitter.github.com/bootstrap) for styling links, buttons and drop-downs.
  376. CSS classes are available to style record counts, filters, sorting and more:
  377. ![](img/paginator-styling2.png)
  378. Classes are also available for styling more granular elements like page counts within `breadcrumb > pages` e.g `.page`, `.page selected`:
  379. ![](img/paginator-classes.png)
  380. There's a tremendous amount of flexibility available for styling and as you're in control of templating too, your paginators can be made to look as visually simple or complex as needed.
  381. ### Conclusions
  382. Although it's certainly possible to write your own custom pagination classes to work with Backbone Collections, Backbone.Paginator tries to take care of much of this for you.
  383. It's highly configurable, avoiding the need to write your own paging when working with Collections of data sourced from your database or API. Use the plugin to help tame large lists of data into more manageable, easily navigatable, paginated lists.
  384. Additionally, if you have any questions about Backbone.Paginator (or would like to help improve it), feel free to post to the project [issues](https://github.com/addyosmani/backbone.paginator) list.