Skip to content

Commit 0c8c790

Browse files
author
Anthony Duhaime
committed
Refactored pagination
1 parent 8110e37 commit 0c8c790

File tree

5 files changed

+74
-65
lines changed

5 files changed

+74
-65
lines changed

‎demo/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class Example extends Component {
2727
{ 'id': 20, 'firstname': 'Ronny', 'lastname': 'Gelderd', 'email': '[email protected]' }];
2828
return (
2929
<div>
30-
<Tabledata datas={data} rowsPerPage={8}>
30+
<Tabledata datas={data} rowsPerPage={5}>
3131
<Tableheader attribute={'firstname'}>Firstname</Tableheader>
3232
<Tableheader attribute={'lastname'}>Lastname</Tableheader>
3333
<Tableheader renderCell={(_content, _index, row) => (row.firstname + ' ' + row.lastname)}>Fullname</Tableheader>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"test": "run test"
1010
},
1111
"dependencies": {
12+
"babel-preset-es2015": "^6.24.1",
1213
"react": "^15.4.2",
1314
"react-dom": "^15.4.2"
1415
},

‎src/components/TablePagination.js‎

Lines changed: 60 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,81 @@
11
import React from 'react';
22
import TablePaginationPage from './TablePaginationPage';
33

4-
class TablePagination extends React.Component {
5-
constructor(props) {
6-
super(props);
7-
this.state = {
8-
previousDisabled: true,
9-
nextDisabled: false,
10-
};
11-
}
4+
const TablePagination = (props) => {
5+
const handleClick = (page) => {
6+
if (page >= 0 && page < props.pageCount) {
7+
props.changeHandler(page);
8+
}
9+
};
10+
11+
const hasPages = () => {
12+
return props.pageCount > 0;
13+
};
14+
15+
const renderPrevious = (paginations) => {
16+
paginations.push(<button key='0' onClick={handleClick.bind(this, props.currentPage - 1)}><i>{'<'}</i></button>);
17+
};
1218

13-
handleClick(page) {
14-
if (page >= 0 && page < this.props.pageCount) {
15-
this.props.changeHandler(page);
19+
const renderNext = (paginations) => {
20+
paginations.push(<button onClick={handleClick.bind(this, props.currentPage + 1)} key={props.pageCount + 1}><i>{'>'}</i></button>);
21+
};
22+
23+
const renderLeftSidePagination = (current, paginations) => {
24+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current} pageNumber= {current} changeHandler={handleClick.bind(this, current - 1)}/>);
25+
};
26+
27+
const renderMiddleSidePagination = (current, paginations) => {
28+
if (current - 2 != 1 && current - 3 != 1) {
29+
paginations.push('...');
30+
}
31+
if (current === props.pageCount && props.pageCount > 3) {
32+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current - 2} pageNumber= {current - 2} changeHandler={handleClick.bind(this, current - 3)}/>);
1633
}
17-
this.props.currentPage === 0 ? this.setState({ previousDisabled: true }) : this.setState({ previousDisabled: false });
18-
this.props.currentPage == this.props.pageCount - 2 ? this.setState({ nextDisabled: true }) : this.setState({ nextDisabled: false });
19-
}
34+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current - 1} pageNumber= {current - 1} changeHandler={handleClick.bind(this, current - 2)}/>);
35+
};
2036

21-
renderPagination() {
37+
const renderRightSidePagination = (current, paginations) => {
38+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current + 1} pageNumber= {current + 1} changeHandler={handleClick.bind(this, current)}/>);
39+
if (current == 1 && props.pageCount > 3) {
40+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current + 2}pageNumber= {current + 2} changeHandler={handleClick.bind(this, current + 1)}/>);
41+
}
42+
if (current + 1 != props.pageCount - 1 && current + 2 != props.pageCount - 1) {
43+
paginations.push('...');
44+
}
45+
};
46+
47+
const renderPagination = () => {
2248
let paginations = [];
23-
let current = this.props.currentPage + 1;
24-
let allPages = this.props.pageCount;
25-
if (allPages == 0) {
49+
let current = props.currentPage + 1;
50+
let allPages = props.pageCount;
51+
if (!hasPages()) {
2652
return;
2753
}
2854

2955
if (current > 1) {
30-
paginations.push(<button disabled={this.props.currentPage === 0 ? this.state.previousDisabled : ''} key='0' onClick={this.handleClick.bind(this, this.props.currentPage - 1)}><i>{'<'}</i></button>);
56+
renderPrevious(paginations);
3157
}
32-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key='1' pageNumber= {1} changeHandler={this.handleClick.bind(this, 0)}/>);
58+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key='1' pageNumber= {1} changeHandler={handleClick.bind(this, 0)}/>);
59+
3360
if (current > 2) {
34-
if (current - 2 != 1 && current - 3 != 1) {
35-
paginations.push('...');
36-
}
37-
if (current === allPages && allPages > 3) {
38-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={current - 2} pageNumber= {current - 2} changeHandler={this.handleClick.bind(this, current - 3)}/>);
39-
}
40-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={current - 1} pageNumber= {current - 1} changeHandler={this.handleClick.bind(this, current - 2)}/>);
61+
renderMiddleSidePagination(current, paginations);
4162
}
4263
if (current != 1 && current != allPages) {
43-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={current} pageNumber= {current} changeHandler={this.handleClick.bind(this, current - 1)}/>);
64+
renderLeftSidePagination(current, paginations);
4465
}
4566
if (current < allPages - 1) {
46-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={current + 1} pageNumber= {current + 1} changeHandler={this.handleClick.bind(this, current)}/>);
47-
if (current == 1 && allPages > 3) {
48-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={current + 2}pageNumber= {current + 2} changeHandler={this.handleClick.bind(this, current + 1)}/>);
49-
}
50-
if (current + 1 != allPages - 1 && current + 2 != allPages - 1) {
51-
paginations.push('...');
52-
}
67+
renderRightSidePagination(current, paginations);
5368
}
54-
paginations.push(<TablePaginationPage currentPage={this.props.currentPage} key={allPages} pageNumber= {allPages} changeHandler={this.handleClick.bind(this, allPages - 1)}/>);
69+
paginations.push(<TablePaginationPage currentPage={props.currentPage} key={allPages} pageNumber= {allPages} changeHandler={handleClick.bind(this, allPages - 1)}/>);
5570
if (current < allPages)
56-
paginations.push(<button onClick={this.handleClick.bind(this, this.props.currentPage + 1)} key={allPages + 1} disabled={this.state.nextDisabled}><i>{'>'}</i></button>);
71+
renderNext(paginations);
72+
5773
return paginations;
58-
}
74+
};
5975

60-
render() {
61-
return (
62-
<div className="table-pagination">
63-
{this.renderPagination()}
64-
</div>
65-
);
66-
}
67-
}
68-
export default TablePagination;
76+
return (
77+
<div className="table-pagination">
78+
{renderPagination()}
79+
</div>
80+
);
81+
}; export default TablePagination;

‎src/components/TablePaginationPage.js‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
import React from 'react';
22

3-
class TablePaginationPage extends React.Component {
4-
constructor(props) {
5-
super(props);
6-
}
3+
const TablePaginationPage = (props) => {
4+
const handleClick = (page) => {
5+
props.changeHandler(page);
6+
};
77

8-
handleClick(page) {
9-
this.props.changeHandler(page);
10-
}
11-
12-
render() {
13-
return (
14-
<button currentPage={this.props.currentPage} className={this.props.currentPage == this.props.pageNumber - 1 ? 'active' : ''} onClick={this.handleClick.bind(this, this.props.pageNumber - 1)}>
15-
<i>{this.props.pageNumber}</i>
16-
</button>
17-
);
18-
}
19-
}
8+
return (
9+
<button currentPage={props.currentPage} className={props.currentPage == props.pageNumber - 1 ? 'active' : ''} onClick={handleClick.bind(this, props.pageNumber - 1)}>
10+
<i>{props.pageNumber}</i>
11+
</button>
12+
);
13+
};
2014
export default TablePaginationPage;

‎src/components/Tabledata.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default class Tabledata extends Component {
1414
this.state = {
1515
page: 0
1616
};
17+
this.handlePageChange = this.handlePageChange.bind(this);
1718
}
1819

1920
setupCells() {
@@ -113,7 +114,7 @@ export default class Tabledata extends Component {
113114
{this.renderHead()}
114115
{this.renderBody()}
115116
</Table>
116-
{this.requiresPagination() && <TablePagination currentPage={this.state.page} pageCount= {this.pageCount()} changeHandler={this.handlePageChange.bind(this)}/>}
117+
{this.requiresPagination() && <TablePagination currentPage={this.state.page} pageCount= {this.pageCount()} changeHandler={this.handlePageChange}/>}
117118
</div>
118119
);
119120
}

0 commit comments

Comments
 (0)