Restaurant-Management-System/Pagination.js at master · codefacts/Restaurant-Management-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
window.Pagination = React.createClass({
    getDefaultProps: function () {
        return {
            page: 1,
            size: 100,
            total: 0,
            navLength: 5,
            onPageRequest: function (e) {
                console.log(e)
            },
            style: {
                marginBottom: '10px',
                marginTop: '10px'
            }
        };
    },

    getInitialState: function () {
        return {};
    },

    onPageClick: function (e) {
        this.handleRequest(e);
    },

    onPrevClick: function (e) {
        this.handleRequest(e);
    },

    onNextClick: function (e) {
        this.handleRequest(e);
    },

    handleRequest: function (e) {
        this.props.onPageRequest($(e.target).attr("data-page"), this.props.size);
    },

    render: function () {
        var _self = this;

        var xxx = {
            page: parseInt(this.props.page),
            size: parseInt(this.props.size),
            total: parseInt(this.props.total),
            navLength: parseInt(this.props.navLength)
        };

        var pu = PaginationUtil(xxx);
        console.log(pu);

        var nav = pu.nav();
        var list = nav.map(function (p) {
            return (
                <li key={p} className={pu.isCurrentPage(p) ? "active" : ""}>
                    <span data-page={p} onClick={_self.onPageClick}>{p}</span>
                </li>
            );
        });

        return (

            <nav>
                <ul className="pagination pagination-sm" style={this.props.style}>
                    <li style={_self.isVisible(nav, 1) ? {display: 'none'} : {}}>
                        <span data-page={pu.first()} onClick={this.onPageClick}>{pu.first()}</span>
                    </li>
                    <li style={_self.isVisible(nav, 1) ? {display: 'none'} : {}}>
                        <span>...</span>
                    </li>
                    <li className={!pu.hasPrev() ? "disabled" : ""}>
                        <span data-page={pu.prev()} onClick={this.onPrevClick}>&laquo;</span>
                    </li>
                    {list}
                    <li className={!pu.hasNext() ? "disabled" : ""}>
                        <span data-page={pu.next()} onClick={this.onNextClick}>&raquo;</span>
                    </li>
                    <li style={_self.isVisible(nav, pu.last()) ? {display: 'none'} : {}}>
                        <span>...</span>
                    </li>
                    <li style={_self.isVisible(nav, pu.last()) ? {display: 'none'} : {}}>
                        <span data-page={pu.last()} onClick={this.onPageClick}>{pu.last()}</span>
                    </li>
                </ul>
            </nav>
        );
    },
    isVisible: function (nav, page) {
        return nav.indexOf(page) !== -1;
    }
})
;