fixed pagination

This commit is contained in:
Jonathan Labreuille
2015-08-25 19:15:02 +02:00
committed by marco
parent 097b638e6b
commit 51d3d2d1b5

View File

@@ -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>&nbsp;|&nbsp;
</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:;"
&nbsp;of&nbsp; 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}
&nbsp;
<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" />
&nbsp;of&nbsp;
<span className="total-pages">
{Math.ceil(this.props.count / this.props.limit)}
</span>
</span> </span>
&nbsp;
{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} />