Skip to content

Commit

Permalink
fix #291
Browse files Browse the repository at this point in the history
  • Loading branch information
@AllenFang
AllenFang committed Feb 22, 2016
2 parents 8d8553b + 1bcae21 commit add9ff6
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 76 deletions.
67 changes: 34 additions & 33 deletions src/BootstrapTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ class BootstrapTable extends React.Component {

this.state = {
data: this.getTableData(),
currPage: this.props.options.page || 1,
sizePerPage: this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0],
selectedRowKeys: this.store.getSelectedRowKeys()
};
}
Expand Down Expand Up @@ -100,8 +102,8 @@ class BootstrapTable extends React.Component {
if (this.props.pagination) {
let page, sizePerPage;
if (this.store.isChangedPage()) {
sizePerPage = this.refs.pagination.getSizePerPage();
page = this.refs.pagination.getCurrentPage();
sizePerPage = this.state.sizePerPage;
page = this.state.currPage;
} else {
sizePerPage = this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0];
page = this.props.options.page || 1;
Expand Down Expand Up @@ -148,7 +150,9 @@ class BootstrapTable extends React.Component {
if(sortField && sortOrder) this.store.sort(sortOrder, sortField);
let data = this.store.page(page, sizePerPage).get();
this.setState({
data: data
data: data,
currPage: page,
sizePerPage: sizePerPage
});
}
if (nextProps.selectRow && nextProps.selectRow.selected) {
Expand Down Expand Up @@ -302,7 +306,9 @@ class BootstrapTable extends React.Component {

let result = this.store.page(page, sizePerPage).get();
this.setState({
data: result
data: result,
currPage: page,
sizePerPage
});
}

Expand Down Expand Up @@ -337,14 +343,13 @@ class BootstrapTable extends React.Component {
this.store.ignoreNonSelected();
let result;
if (this.props.pagination) {
let sizePerPage = this.refs.pagination.getSizePerPage();
result = this.store.page(1, sizePerPage).get();
this.refs.pagination.changePage(1);
result = this.store.page(1, this.state.sizePerPage).get();
} else {
result = this.store.get();
}
this.setState({
data: result
data: result,
currPage: 1,
});
}

Expand Down Expand Up @@ -411,13 +416,13 @@ class BootstrapTable extends React.Component {

if (this.props.pagination) {
//if pagination is enabled and insert row be trigger, change to last page
let sizePerPage = this.refs.pagination.getSizePerPage();
let currLastPage = Math.ceil(this.store.getDataNum() / sizePerPage);
const { sizePerPage } = this.state;
const currLastPage = Math.ceil(this.store.getDataNum() / sizePerPage);
result = this.store.page(currLastPage, sizePerPage).get();
this.setState({
data: result
data: result,
currPage: currLastPage,
});
this.refs.pagination.changePage(currLastPage);
} else {
result = this.store.get();
this.setState({
Expand All @@ -431,15 +436,11 @@ class BootstrapTable extends React.Component {
}

getSizePerPage() {
if (this.props.pagination) {
return this.refs.pagination.getSizePerPage();
}
return this.state.sizePerPage;
}

getCurrentPage() {
if (this.props.pagination) {
return this.refs.pagination.getCurrentPage();
}
return this.state.currPage;
}

handleDropRow(rowKeys) {
Expand All @@ -466,17 +467,17 @@ class BootstrapTable extends React.Component {
this.store.setSelectedRowKey([]); //clear selected row key

if (this.props.pagination) {
let sizePerPage = this.refs.pagination.getSizePerPage();
const { sizePerPage } = this.state;
let { currPage } = this.state;
let currLastPage = Math.ceil(this.store.getDataNum() / sizePerPage);
let currentPage = this.refs.pagination.getCurrentPage();
if (currentPage > currLastPage)
currentPage = currLastPage;
result = this.store.page(currentPage, sizePerPage).get();
if (currPage > currLastPage)
currPage = currLastPage;
result = this.store.page(currPage, sizePerPage).get();
this.setState({
data: result,
selectedRowKeys: this.store.getSelectedRowKeys()
selectedRowKeys: this.store.getSelectedRowKeys(),
currPage
});
this.refs.pagination.changePage(currentPage);
} else {
result = this.store.get();
this.setState({
Expand All @@ -494,17 +495,17 @@ class BootstrapTable extends React.Component {
this.store.filter(filterObj);
let result;
if (this.props.pagination) {
let sizePerPage = this.refs.pagination.getSizePerPage();
const { sizePerPage } = this.state;
result = this.store.page(1, sizePerPage).get();
this.refs.pagination.changePage(1);
} else {
result = this.store.get();
}
if(this.props.options.afterColumnFilter)
this.props.options.afterColumnFilter(filterObj,
this.store.getDataIgnoringPagination());
this.setState({
data: result
data: result,
currPage: 1
});
}

Expand All @@ -523,16 +524,16 @@ class BootstrapTable extends React.Component {
this.store.search(searchText);
let result;
if (this.props.pagination) {
let sizePerPage = this.refs.pagination.getSizePerPage();
const { sizePerPage } = this.state;
result = this.store.page(1, sizePerPage).get();
this.refs.pagination.changePage(1);
} else {
result = this.store.get();
}
if(this.props.options.afterSearch)
this.props.options.afterSearch(searchText, this.store.getDataIgnoringPagination());
this.setState({
data: result
data: result,
currPage: 1
});
}

Expand All @@ -548,9 +549,9 @@ class BootstrapTable extends React.Component {
<div className="table-footer-pagination">
<PaginationList
ref="pagination"
currPage={this.props.options.page || 1}
currPage={ this.state.currPage }
changePage={this.handlePaginationData.bind(this)}
sizePerPage={this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0]}
sizePerPage={ this.state.sizePerPage }
sizePerPageList={this.props.options.sizePerPageList || Const.SIZE_PER_PAGE_LIST}
paginationSize={this.props.options.paginationSize || Const.PAGINATION_SIZE}
remote={this.isRemoteDataSource()}
Expand Down
62 changes: 19 additions & 43 deletions src/pagination/PaginationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,11 @@ import Const from '../Const';

class PaginationList extends React.Component {

constructor(props) {
super(props);
this.state = {
currentPage: this.props.currPage,
sizePerPage: this.props.sizePerPage
};
}

changePage(page) {
if (page == this.props.prePage) {
page = this.state.currentPage - 1 < 1 ? 1 : this.state.currentPage - 1;
page = this.props.currPage - 1 < 1 ? 1 : this.props.currPage - 1;
} else if (page == this.props.nextPage) {
page = this.state.currentPage + 1 > this.totalPages ? this.totalPages : this.state.currentPage + 1;
page = this.props.currPage + 1 > this.totalPages ? this.totalPages : this.props.currPage + 1;
} else if (page == this.props.lastPage) {
page = this.totalPages;
} else if (page == this.props.firstPage) {
Expand All @@ -25,46 +17,30 @@ class PaginationList extends React.Component {
page = parseInt(page);
}

if (page != this.state.currentPage) {
this.setState({currentPage: page});
this.props.changePage(page, this.state.sizePerPage);
}
}

componentWillReceiveProps(nextProps) {
if (this.props.remote) {
if (nextProps.currPage || nextProps.sizePerPage) {
this.setState({
currentPage: nextProps.currPage,
sizePerPage: nextProps.sizePerPage,
});
}
if (page != this.props.currPage) {
this.props.changePage(page, this.props.sizePerPage);
}
}


changeSizePerPage(e) {
e.preventDefault();

var selectSize = parseInt(e.currentTarget.text);
if (selectSize != this.state.sizePerPage) {
const selectSize = parseInt(e.currentTarget.text);
let { currPage } = this.props;
if (selectSize != this.props.sizePerPage) {
this.totalPages = Math.ceil(this.props.dataSize / selectSize);
if (this.state.currentPage > this.totalPages)
this.state.currentPage = this.totalPages;

this.setState({
sizePerPage: selectSize,
currentPage: this.state.currentPage
});
this.props.changePage(this.state.currentPage, selectSize);
if (currPage > this.totalPages)
currPage = this.totalPages;

this.props.changePage(currPage, selectSize);
if(this.props.onSizePerPageList){
this.props.onSizePerPageList(selectSize);
}
}
}

render() {
this.totalPages = Math.ceil(this.props.dataSize / this.state.sizePerPage);
this.totalPages = Math.ceil(this.props.dataSize / this.props.sizePerPage);
var pageBtns = this.makePage();
var pageListStyle = {
float: "right",
Expand All @@ -87,7 +63,7 @@ class PaginationList extends React.Component {
<div className="dropdown">
<button className="btn btn-default dropdown-toggle" type="button" id="pageDropDown" data-toggle="dropdown"
aria-expanded="true">
{this.state.sizePerPage}
{this.props.sizePerPage}
<span>
{" "}
<span className="caret"/>
Expand All @@ -112,15 +88,15 @@ class PaginationList extends React.Component {
makePage() {
var pages = this.getPages();
return pages.map(function (page) {
var isActive = page === this.state.currentPage;
var isActive = page === this.props.currPage;
var disabled = false;
var hidden = false;
if(this.state.currentPage == 1 &&
if(this.props.currPage == 1 &&
(page === this.props.firstPage || page === this.props.prePage)){
disabled = true;
hidden = true;
}
if(this.state.currentPage == this.totalPages &&
if(this.props.currPage == this.totalPages &&
(page === this.props.nextPage || page === this.props.lastPage)){
disabled = true;
hidden = true;
Expand All @@ -134,7 +110,7 @@ class PaginationList extends React.Component {
getPages() {
var startPage = 1, endPage = this.totalPages;

startPage = Math.max(this.state.currentPage - Math.floor(this.props.paginationSize / 2), 1);
startPage = Math.max(this.props.currPage - Math.floor(this.props.paginationSize / 2), 1);
endPage = startPage + this.props.paginationSize - 1;

if (endPage > this.totalPages) {
Expand Down Expand Up @@ -163,11 +139,11 @@ class PaginationList extends React.Component {
}

getCurrentPage() {
return this.state.currentPage;
return this.props.currPage;
}

getSizePerPage() {
return this.state.sizePerPage;
return this.props.sizePerPage;
}
}
PaginationList.propTypes = {
Expand Down

0 comments on commit add9ff6

Please sign in to comment.