simple usage in browser:
RiotControl.trigger('updatePage', 1, 10, 100);
Last active
November 18, 2016 13:56
-
-
Save assertnotnull/c3b383f05a0fdc85ddf5 to your computer and use it in GitHub Desktop.
Autonomous riot.js paging
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
| <paging> | |
| <div class="row"> | |
| <div class="col-sm-5"> | |
| <div aria-live="polite" role="status" id="table_info" class="dataTables_info"> | |
| With | |
| <select name="selectPageLength" id="selectPageLength" class="form-control" onchange={updatePageLength} disabled> | |
| <option value="10">10</option> | |
| <option value="20">20</option> | |
| <option value="40">40</option> | |
| </select> | |
| entries/page: Showing {beginRange()} to {endRange()} of {total} entries | |
| </div> | |
| </div> | |
| <div id="pagination" class="dataTables_paginate paging_simple_numbers"> | |
| <ul class="pagination"> | |
| <li each={pageList} class="paginate_button {disabled:!enabled} {active:selected}"> | |
| <a href="javascript:void(0)" onclick={changePage}>{name}</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var self = this | |
| this.currentPage = 1 | |
| this.totalPages = 1 | |
| this.total = 1 | |
| this.left = 1 | |
| this.right = 1 | |
| this.innerWindow = 2 | |
| this.pageLength = 10 | |
| this.pageList = [] | |
| beginRange() { | |
| return self.currentPage * self.pageLength - self.pageLength + 1 | |
| } | |
| endRange() { | |
| var endRangeNumber = self.currentPage * self.pageLength | |
| return endRangeNumber > self.total ? self.total : endRangeNumber | |
| } | |
| changePage(elem) { | |
| var item = elem.item | |
| if(item.enabled && !_.isEqual(item.name, self.currentPage)) { | |
| var targetPage = item.name | |
| if (item.name === 'Previous') { | |
| targetPage = self.currentPage - 1 | |
| } else if (item.name === 'Next') { | |
| targetPage = self.currentPage + 1 | |
| } | |
| RiotControl.trigger('querydata', targetPage); | |
| } | |
| } | |
| updatePageLength(e) { | |
| self.pageLength = e.target.value | |
| RiotControl.trigger('queryWithLength', e.target.value) | |
| } | |
| RiotControl.on('triggerPaging', function (flag) { | |
| self.pageList.forEach(function (page) { | |
| page.enabled = flag | |
| }) | |
| $('#resetfilter').prop('disabled', !flag) | |
| $('#selectPageLength').prop('disabled', !flag) | |
| }) | |
| this.on('mount', function () { | |
| self.pageList = [ | |
| {name:'Previous', enabled: false, selected: false}, | |
| {name:'Next', enabled: false, selected: false} | |
| ] | |
| self.update() | |
| }) | |
| updateView() { | |
| self.left = 1 | |
| self.right = 1 | |
| self.pageList = [ | |
| {name:'Previous', enabled: self.currentPage > 1, selected: false} | |
| ] | |
| self.right = self.totalPages - self.right | |
| for (var i = 1; i <= self.totalPages; i++) { | |
| if (self.is.number(i, self.left, self.right, self.currentPage, self.innerWindow)) { | |
| var item = { | |
| name: i, | |
| selected: self.currentPage == i, | |
| enabled: true | |
| } | |
| self.pageList.push(item) | |
| } else if (self.is.dotted(i, self.left, self.right, self.currentPage, self.innerWindow, self.pageList.length)) { | |
| var item = ({ | |
| name: '...', | |
| selected: false, | |
| enabled: false | |
| }); | |
| self.pageList.push(item); | |
| } | |
| } | |
| self.pageList.push({name:'Next', enabled: self.currentPage < self.totalPages, selected: false}) | |
| self.update() | |
| } | |
| RiotControl.on('updatePage', function (page, totalPages, total) { | |
| var ceil = Math.ceil(totalPages) | |
| self.totalPages = totalPages > ceil ? ceil + 1 : ceil | |
| self.currentPage = Number(page) | |
| self.total = total | |
| self.updateView() | |
| }) | |
| this.is = { | |
| number: function(i, left, right, currentPage, innerWindow) { | |
| return this.left(i, left) || this.right(i, right) || this.innerWindow(i, currentPage, innerWindow); | |
| }, | |
| left: function(i, left) { | |
| return (i <= left); | |
| }, | |
| right: function(i, right) { | |
| return (i > right); | |
| }, | |
| innerWindow: function(i, currentPage, innerWindow) { | |
| return ( i >= (currentPage - innerWindow) && i <= (currentPage + innerWindow)); | |
| }, | |
| dotted: function(i, left, right, currentPage, innerWindow, currentPageItem) { | |
| return this.dottedLeft(i, left, right, currentPage, innerWindow) || (this.dottedRight(i, left, right, currentPage, innerWindow, currentPageItem)); | |
| }, | |
| dottedLeft: function(i, left, right, currentPage, innerWindow) { | |
| return ((i == (left + 1)) && !this.innerWindow(i, currentPage, innerWindow) && !this.right(i, right)); | |
| }, | |
| dottedRight: function(i, left, right, currentPage, innerWindow, currentPageItem) { | |
| if (self.pageList[currentPageItem-1].name === '...') { | |
| return false; | |
| } else { | |
| return ((i == (right)) && !this.innerWindow(i, currentPage, innerWindow) && !this.right(i, right)); | |
| } | |
| } | |
| } | |
| </script> | |
| </paging> |
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
| var RiotControl = { | |
| _stores: [], | |
| addStore: function(store) { | |
| this._stores.push(store); | |
| } | |
| }; | |
| ['on','one','off','trigger'].forEach(function(api){ | |
| RiotControl[api] = function() { | |
| var args = [].slice.call(arguments); | |
| this._stores.forEach(function(el){ | |
| el[api].apply(el, args); | |
| }); | |
| }; | |
| }); | |
| if (typeof(module) !== 'undefined') module.exports = RiotControl; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment