Displays a pager.
Displays a pager.
<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 750,
currentPage: 1
}
render() {
const {total, currentPage} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
disablePageSizeSelector
onPageChange={currentPage => this.setState({currentPage})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 750,
currentPage: 1
}
render() {
const {total, currentPage} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
visiblePagesLimit={3}
disablePageSizeSelector
onPageChange={currentPage => this.setState({currentPage})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 250,
currentPage: 1
}
render() {
const {total, currentPage} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
visiblePagesLimit={5}
disablePageSizeSelector
onPageChange={currentPage => this.setState({currentPage})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 400,
currentPage: 1
}
render() {
const {total, currentPage} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
visiblePagesLimit={5}
disablePageSizeSelector
onPageChange={currentPage => this.setState({currentPage})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 300,
currentPage: 1,
pageSize: 50
}
render() {
const {total, currentPage, pageSize} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
pageSize={pageSize}
onPageChange={currentPage => this.setState({currentPage})}
onPageSizeChange={pageSize => this.setState({pageSize})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
class Example extends Component {
state = {
total: 10,
currentPage: 1,
pageSize: 10
}
render() {
const {total, currentPage, pageSize} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
pageSize={pageSize}
openTotal={total < 100}
onPageChange={cp => this.setState({currentPage: cp})}
onLoadPage={cp => this.setState({currentPage: cp, total: this.state.total + 10})}
visiblePagesLimit={5}
disablePageSizeSelector
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
const getDataFromUrl = (name, defaultValue) => {
const params = new URLSearchParams(location.search);
const value = params.get(name);
return value != undefined ? parseInt(value) : defaultValue;
}
const hrefGenerator = (linkPageNumber, pageSize) => {
const params = new URLSearchParams(location.search);
params.set('page', linkPageNumber)
if (pageSize != undefined){
params.set('pageSize', pageSize)
}
return `${location.pathname}?${params}`;
}
const handleHistory = (page, pageSize) => {
window.history.pushState({page: page, pageSize: pageSize}, '', hrefGenerator(page, pageSize));
};
class Example extends Component {
state = {
total: 999,
currentPage: getDataFromUrl("page", 1),
pageSize: getDataFromUrl("pageSize", 20)
}
handlePageChange(update) {
this.setState(update, () => history.pushState(this.state, '',
hrefGenerator(this.state.currentPage, this.state.pageSize)))
}
componentDidMount() {
history.replaceState(this.state, '', hrefGenerator(this.state.currentPage, this.state.pageSize))
window.addEventListener('popstate', event => {
if (window.history.state && window.history.state.currentPage && window.history.state.pageSize){
this.setState({pageSize: window.history.state.pageSize, currentPage: window.history.state.currentPage});
}
}, false);
}
componentWillUnmount() {
window.removeEventListener('popstate');
}
render() {
const {total, currentPage, pageSize} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
pageSize={pageSize}
hrefFunc={hrefGenerator}
visiblePagesLimit={5}
openTotal={total < 2000}
onPageChange={currentPage => this.handlePageChange({currentPage})}
onPageSizeChange={pageSize => this.handlePageChange({currentPage: 1, pageSize})}
onLoadPage={currentPage => this.handlePageChange(prevState => ({currentPage, total: prevState.total + 500}))}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));<div id="pager"></div>import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
const getDataFromUrl = (name, defaultValue) => {
const params = new URLSearchParams(location.search);
const value = params.get(name);
return value != undefined ? parseInt(value) : defaultValue;
}
const hrefGenerator = (linkPageNumber, pageSize) => {
const params = new URLSearchParams(location.search);
params.set('page', linkPageNumber)
if (pageSize != undefined){
params.set('pageSize', pageSize)
}
return `${location.pathname}?${params}`;
}
class Example extends Component {
state = {
total: 120,
currentPage: getDataFromUrl("page", 1),
pageSize: getDataFromUrl("pageSize", 20)
}
render() {
const {total, currentPage, pageSize} = this.state;
return (
<Pager
total={total}
currentPage={currentPage}
pageSize={pageSize}
hrefFunc={hrefGenerator}
visiblePagesLimit={5}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('pager'));