src/shared/paginator.component.js


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

import React from 'react';
import _ from 'lodash';

const Paginator = (props) => {

    let {totalRecords=0, currentPage=1, pageSize=15} = props;
    let pages = [1];
    let previousItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';
    let nextItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';

    if(totalRecords>pageSize){
        pages = _.times(parseInt(totalRecords/pageSize,10));
    }

    const onPrevious = ()=>{
        if(props.previousPage){
            props.previousPage();            
        } 
    }

    const onNext = ()=>{
        if(props.nextPage){
            props.nextPage();            
        }
    }

    const onPageClick = (pageNum)=>{
        if(props.goToNextPage){
            props.goToNextPage(pageNum);            
        }
    }


    return (
        <nav>
            <ul className="pagination">
                <li className={previousItemStyle}>
                    <a className="page-link" href="#!" onClick={onPrevious}>Previous</a>
                </li>

                {pages.map(_page=>{
                    return(
                        <li key={_page} className={_page==currentPage ? "page-item active" : "page-item"}>
                            <a className="page-link" href="#!" onClick={onPageClick.bind(this, _page)}>{_page}</a>
                        </li>
                    )
                })}
                <li className={nextItemStyle}>
                    <a className="page-link" href="#!" onClick={onNext}>Next</a>
                </li>
            </ul>
        </nav>
    )
}

export default Paginator;