React-bootstrap-table - собственное количество элементов пагинации
Я использую BootstrapTable из response-bootstrap-table и беру данные из внешнего API. Каждый раз я получаю предмет из 30 предметов. Следовательно, pageSize равен 30, но я получаю переменную totalPages из API, которая, скажем, равна 6. К сожалению, данные таблицы каждый раз 30, поэтому есть только одна страница.
Я хотел бы указать в таблице, сколько страниц я хочу иметь - 6 - и каждый раз, когда по щелчку в элементе разбивки на страницы, я буду вызывать другую ссылку API. Как я могу этого добиться?
onPageChange = page => {
alert(`Let's go to page: ${page}`);
};
render() {
const options = {
onPageChange: this.onPageChange,
hideSizePerPage: true,
page: 1,
sizePerPage: this.props.pageSize,
paginationSize: 6,
};
return (
<Card>
<CardHeader>
<h1> Sales report</h1>
</CardHeader>
<CardBody>
<BootstrapTable
data = {this.props.sales}
version = "4"
striped
hover
pagination
options = {options}
keyField = "Type"
>
{tableHeaders.map((header, index) => (
<TableHeaderColumn key = {index} dataField = {header}>
{header}
</TableHeaderColumn>
))}
</BootstrapTable>
</CardBody>
</Card>
);
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны передать объект options и указать точное количество элементов и обратный вызов, щелкая по каждой странице.
Например:
class PaginationHookTable extends React.Component {
constructor(props) {
super(props);
this.options = {
onPageChange: this.onPageChange,
sizePerPage: 6,
};
this.state = {
data: [],
}
}
onPageChange = (page, sizePerPage) => {
alert(`page: ${page}, sizePerPage: ${sizePerPage}`);
// make another url
const url = `http://someurl.com/api/endpoint?page=${page}`;
// make request and update state with new data
// axios just for example
axios.get(url).then(resp => this.setState({ data: resp });
}
render() {
return (
<div>
<BootstrapTable
data = {this.state.data}
options = {this.options}
remote = {true}
// you need to use your number of total from backend
// instead of 100 ofc
fetchInfo = {{ dataTotalSize: 100 }}
pagination>
<TableHeaderColumn dataField='id'>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
</div>
);
}
}
ОБНОВИТЬ: Вы должны передать дополнительные реквизиты: remote = {true} и fetchInfo: { dataTotalSize: 100 }, чтобы указать общее количество элементов.
См. Еще здесь.
Отредактировал ответ - добавил код. Таким образом, в основном таблица response-bootstrap не заботится о paginationSize: 6, потому что данные - 30items, а pageSize - также 30items
@ jake-ferguson вы используете первую версию react-bootstrap-table?
Вам не нужно использовать paginationSize - он предназначен только для отображения полосы. Я обновил ответ, как вызвать другой URL-адрес API. Чтобы указать, сколько элементов должно быть на странице, используйте sizePerPage. Также убедитесь, что вы передаете правильное значение в качестве опоры здесь sizePerPage: this.props.pageSize. Я создал для вас codeandbox - проверьте это - кликните сюда.
в этой песочнице происходит то же самое, что и в моем примере - если мы изменим sizePerPage на 2, то будет только на странице - один элемент в разбивке на страницы
@ jake-ferguson Я обновил свой ответ в разделе ОБНОВИТЬ.
У меня есть еще одна проблема с разбиением на страницы, в конце концов, я должен начать с 0 в качестве индекса первой страницы, и моя таблица будет выглядеть так: imgur.com/CxPqtIJ. Может ли первая (номер1) быть страницей = 0? как это сделать?
@ jake-ferguson Вам нужно отобразить 0? Если нет, вы можете просто вычесть 1 перед отправкой запроса на сервер.
нет, когда у меня в магазине page = 0 и я беру из серверных данных со страницы 0 Я хочу, чтобы компонент разбиения на страницы отображал 1 и т. д.
Насколько я понимаю, вы должны перед отправкой запроса на следующие данные вычесть 1, например: onPageChange = (page) => {axios.get(`https://someurl.com/api?page=${page-1}`).then(...) }
@ jake-ferguson или просто передайте объект option, рассчитанный page prop: const options = { page: this.state.currentPage + 1 // Showing page 1 if currentPage 0 };
Что ж, я сделал это, и это работает только в начале. в опциях у меня есть page: this.props.filters.page + 1, и при входе в таблицу он показывает правильно 1, но когда я перехожу на страницу номер 2, он отмечает и показывает, как было 3, при переходе на 1 он показывает 2 ...
и вот моя функция onPageChange `onPageChange = page => {this.props.changePage (page); this.props.getSales (); }; `
Хорошо, я только что вычел 1 в функции this.props.changePage(page - 1), и теперь все в порядке, еще раз спасибо
нет, извините, это не так; / stackoverflow.com/questions/51984415/…
Я видел этот пример и использую часть этого кода с onPageChange, но это не решает мою проблему (или я не понимаю, что вы имеете в виду). Проблема в том, что данные - 30 элементов, размер страницы - 30 элементов. также, но я хочу иметь эту разбивку на страницы, потому что я получу от API еще 30 элементов данных при изменении страницы. Итак, страница 1 -API1, страница 2 -API2 и т. д. Я думаю, что с вашим кодом все равно будет 1 элемент разбивки на страницы, потому что таблица считает, что нужен только 1