fixed pagination
This commit is contained in:
committed by
marco
parent
097b638e6b
commit
51d3d2d1b5
@@ -9,8 +9,8 @@ define('subscribers.listing',
|
|||||||
<li>
|
<li>
|
||||||
<a className="current">
|
<a className="current">
|
||||||
All
|
All
|
||||||
<span className="count">(0)</span>
|
<span className="count">({ this.props.count })</span>
|
||||||
</a> |
|
</a> |
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a>
|
<a>
|
||||||
@@ -65,78 +65,122 @@ define('subscribers.listing',
|
|||||||
this.props.onSetPage(1);
|
this.props.onSetPage(1);
|
||||||
},
|
},
|
||||||
setLastPage: function() {
|
setLastPage: function() {
|
||||||
var last_page = Math.ceil(this.props.count / this.props.limit);
|
this.props.onSetPage(this.getLastPage());
|
||||||
this.props.onSetPage(last_page);
|
|
||||||
},
|
},
|
||||||
setPreviousPage: function() {
|
setPreviousPage: function() {
|
||||||
this.props.onSetPage(this.getPageValue(this.props.page - 1));
|
this.props.onSetPage(this.constrainPage(this.props.page - 1));
|
||||||
},
|
},
|
||||||
setNextPage: function() {
|
setNextPage: function() {
|
||||||
this.props.onSetPage(this.getPageValue(this.props.page + 1));
|
this.props.onSetPage(this.constrainPage(this.props.page + 1));
|
||||||
},
|
},
|
||||||
getPageValue: function(page) {
|
constrainPage: function(page) {
|
||||||
var last_page = Math.ceil(this.props.count / this.props.limit);
|
return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
|
||||||
return Math.min(Math.max(1, Math.abs(~~page)), last_page);
|
|
||||||
},
|
},
|
||||||
handleSetPage: function() {
|
handleSetPage: function() {
|
||||||
this.props.onSetPage(
|
this.props.onSetPage(
|
||||||
this.getPageValue(this.refs.page.getDOMNode().value)
|
this.constrainPage(this.refs.page.getDOMNode().value)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
getLastPage: function() {
|
||||||
|
return Math.ceil(this.props.count / this.props.limit);
|
||||||
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
if(this.props.count === 0) {
|
||||||
<div className="tablenav-pages">
|
return (<div></div>);
|
||||||
<span className="displaying-num">{this.props.count} item(s)</span>
|
} else {
|
||||||
|
var firstPage = (
|
||||||
|
<span aria-hidden="true" className="tablenav-pages-navspan">«</span>
|
||||||
|
),
|
||||||
|
previousPage = (
|
||||||
|
<span aria-hidden="true" className="tablenav-pages-navspan">‹</span>
|
||||||
|
),
|
||||||
|
nextPage = (
|
||||||
|
<span aria-hidden="true" className="tablenav-pages-navspan">›</span>
|
||||||
|
),
|
||||||
|
lastPage = (
|
||||||
|
<span aria-hidden="true" className="tablenav-pages-navspan">»</span>
|
||||||
|
);
|
||||||
|
|
||||||
<span className="pagination-links">
|
if(this.props.count > this.props.limit) {
|
||||||
<a href="javascript:;"
|
if(this.props.page > 1) {
|
||||||
onClick={this.setFirstPage}
|
previousPage = (
|
||||||
className="first-page">
|
<a href="javascript:;"
|
||||||
<span className="screen-reader-text">First page</span>
|
onClick={this.setPreviousPage}
|
||||||
<span aria-hidden="true">«</span>
|
className="prev-page">
|
||||||
</a>
|
<span className="screen-reader-text">Previous page</span>
|
||||||
<a href="javascript:;"
|
<span aria-hidden="true">‹</span>
|
||||||
onClick={this.setPreviousPage}
|
</a>
|
||||||
className="prev-page">
|
);
|
||||||
<span className="screen-reader-text">Previous page</span>
|
}var last_page = Math.ceil(this.props.count / this.props.limit);
|
||||||
<span aria-hidden="true">‹</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<span className="paging-input">
|
if(this.props.page > 2) {
|
||||||
<label
|
firstPage = (
|
||||||
className="screen-reader-text"
|
<a href="javascript:;"
|
||||||
htmlFor="current-page-selector">Current Page</label>
|
onClick={this.setFirstPage}
|
||||||
<input
|
className="first-page">
|
||||||
type="text"
|
<span className="screen-reader-text">First page</span>
|
||||||
onChange={this.handleSetPage}
|
<span aria-hidden="true">«</span>
|
||||||
aria-describedby="table-paging"
|
</a>
|
||||||
size="1"
|
);
|
||||||
ref="page"
|
}
|
||||||
value={this.props.page}
|
|
||||||
name="paged"
|
if(this.props.page < this.getLastPage()) {
|
||||||
id="current-page-selector"
|
nextPage = (
|
||||||
className="current-page" />
|
<a href="javascript:;"
|
||||||
of
|
onClick={this.setNextPage}
|
||||||
<span className="total-pages">
|
className="next-page">
|
||||||
{Math.ceil(this.props.count / this.props.limit)}
|
<span className="screen-reader-text">Next page</span>
|
||||||
|
<span aria-hidden="true">›</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.props.page < this.getLastPage() - 1) {
|
||||||
|
lastPage = (
|
||||||
|
<a href="javascript:;"
|
||||||
|
onClick={this.setLastPage}
|
||||||
|
className="last-page">
|
||||||
|
<span className="screen-reader-text">Last page</span>
|
||||||
|
<span aria-hidden="true">»</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="tablenav-pages">
|
||||||
|
<span className="displaying-num">{this.props.count} item(s)</span>
|
||||||
|
|
||||||
|
<span className="pagination-links">
|
||||||
|
{firstPage}
|
||||||
|
{previousPage}
|
||||||
|
|
||||||
|
<span className="paging-input">
|
||||||
|
<label
|
||||||
|
className="screen-reader-text"
|
||||||
|
htmlFor="current-page-selector">Current Page</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
onChange={this.handleSetPage}
|
||||||
|
aria-describedby="table-paging"
|
||||||
|
size="1"
|
||||||
|
ref="page"
|
||||||
|
value={this.props.page}
|
||||||
|
name="paged"
|
||||||
|
id="current-page-selector"
|
||||||
|
className="current-page" />
|
||||||
|
of
|
||||||
|
<span className="total-pages">
|
||||||
|
{Math.ceil(this.props.count / this.props.limit)}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
{nextPage}
|
||||||
|
{lastPage}
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
<a href="javascript:;"
|
);
|
||||||
onClick={this.setNextPage}
|
}
|
||||||
className="next-page">
|
|
||||||
<span className="screen-reader-text">Next page</span>
|
|
||||||
<span aria-hidden="true">›</span>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;"
|
|
||||||
onClick={this.setLastPage}
|
|
||||||
className="last-page">
|
|
||||||
<span className="screen-reader-text">Last page</span>
|
|
||||||
<span aria-hidden="true">»</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -338,7 +382,7 @@ define('subscribers.listing',
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ListingGroups />
|
<ListingGroups count={this.state.count} />
|
||||||
<ListingSearch
|
<ListingSearch
|
||||||
onSearch={this.handleSearch}
|
onSearch={this.handleSearch}
|
||||||
search={this.state.search} />
|
search={this.state.search} />
|
||||||
|
Reference in New Issue
Block a user