Autonomous riot.js paging

howto.md

simple usage in browser:

RiotControl.trigger('updatePage', 1, 10, 100);

paging.tag

<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>

RiotControl.js

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;