Created
December 25, 2012 03:08
-
-
Save kstevens715/4371493 to your computer and use it in GitHub Desktop.
Ember.js AJAX table pagination helper using Twitter Bootstrap. Assumes an ArrayController is in place that implements refreshData(page_num). Replace `Nepco` with [YOURAPPNAME], and in the view with your table add `{{view [YOURAPPNAME].PaginationView}}`. Lots of work to be done still. Plan on having this just be one component in a generic Datatab…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### | |
| Twitter Bootstrap compatible pagination view. | |
| Relies on an ArrayController being in place that implements | |
| refreshData(page_num) | |
| ### | |
| # Names of previous and next buttons can be adjusted: | |
| PREV = "Prev" | |
| NEXT = "Next" | |
| # The number of page numbers to display (should be odd). | |
| NUM_PAGES = 5 | |
| Nepco.PaginationView = Em.ContainerView.extend | |
| tagName: 'div' | |
| classNames: ['pagination', 'pagination-right'] | |
| childViews: ['pageView'] | |
| pageView: Ember.CollectionView.extend | |
| currentPage: null | |
| tagName: 'ul' | |
| content: [] | |
| didInsertElement: -> | |
| @addObserver 'currentPage', @redrawPages | |
| @set 'currentPage', 1 | |
| redrawPages: -> | |
| firstPage = Math.max(1, @currentPage - parseInt(NUM_PAGES / 2)) | |
| lastPage = firstPage + NUM_PAGES | |
| @content.setObjects [ | |
| PREV, | |
| i for i in [firstPage...lastPage]..., | |
| NEXT | |
| ] | |
| itemViewClass: Ember.View.extend | |
| tagName: 'li' | |
| template: Ember.Handlebars.compile( | |
| '<a href="#" {{bindAttr data-page="view.content"}} {{action "paginate" target="view"}}>{{view.content}}</a>' | |
| ) | |
| disabled: true | |
| classNameBindings: ['isCurrent:active', 'isValid::disabled'] | |
| currentPageBinding: 'parentView.currentPage' | |
| isCurrent: ( -> | |
| thePage = parseInt(@content) | |
| if !isNaN(thePage) | |
| thePage == @currentPage | |
| ).property('currentPage') | |
| isValid: ( -> | |
| !(@content == PREV and @currentPage == 1) | |
| ).property('currentPage') | |
| paginate: (event) -> | |
| newPage = @getPageNum(event.currentTarget.attributes.getNamedItem('data-page').value) | |
| @set 'currentPage', newPage | |
| controller = @get("controller") | |
| controller.refreshData @currentPage | |
| getPageNum: (page) -> | |
| switch page | |
| when PREV | |
| @currentPage - 1 | |
| when NEXT | |
| @currentPage + 1 | |
| else | |
| parseInt(page) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👎