Mithril Bootstrap Pagination

preview-pagination.jsx

import m from "mithril";

export default {

    go(number) {
        this.node.state[this.state] = number;
        this.redraw();
    },

    eachPage(number, active = false) {
        return (
            <li class={`page-item ${active ? 'active' : !active && number === '...' ? 'disabled' : ''}`}>
                <a class="page-link" href="javascript:void(0)" onclick={() => { !active && number !== '...' ? this.go(number) : null }}>{vnode.utility.toPersianDigit(number)}</a>
            </li>
        )
    },

    generator(node, state, redraw, pages) {
        this.node = node;
        this.state = state;
        this.redraw = () => {
            redraw(node);
        }

        let current       = pages.current,
            last          = pages.total,
            delta         = 2,
            left          = current - delta,
            right         = current + delta + 1,
            range         = [],
            rangeWithDots = [],
            l;

        for (let i = 1; i <= last; i++) {
            if (i == 1 || i == last || i >= left && i < right) {
                range.push(i);
            }
        }

        for (let i of range) {
            if (l) {
                if (i - l === 2) {
                    rangeWithDots.push(l + 1);
                } else if (i - l !== 1) {
                    rangeWithDots.push('...');
                }
            }
            rangeWithDots.push(i);
            l = i;
        }

        return (
            <nav aria-label="page navigation">
                <ul class={`pagination ${this.state} justify-content-center mt-4 mb-0`}>
                    <li class={`page-item ${!pages.hasPrev ? 'disabled' : ''}`}>
                        <a class="page-link" href="javascript:void(0)" onclick={_ => { this.go(pages.current - 1) }} tabindex="-1">صفحه قبل</a>
                    </li>

                    {rangeWithDots.map((x) => {
                        return this.eachPage(x, pages.current === x ? true : false)
                    })}

                    <li class={`page-item ${!pages.hasNext ? 'disabled' : ''}`}>
                        <a class="page-link" href="javascript:void(0)" onclick={_ => { this.go(pages.current + 1) }}>صفحه بعد</a>
                    </li>
                </ul>
            </nav>
        )
    }
};