I am trying to paginate a table using react-bootstrap. To do this I created a page below. However instead of seeing the pagination component in the docs, I see a bunch of <li> tags for "<<", "<" "1", "2", ">", ">>" on separate lines.
Also when I click the next button or a page button instead getting a number in the eventKey of my handleSelect I get the entire event object. Looking around such as here: https://www.codereviewvideos.com/course/pagination-filtering-and-sorting/video/react-pagination-part-1 and https://react-bootstrap.github.io/components.html#pagination, it seems react-bootstrap returns a number. In the example documentation all the list items have a href defined. However, my components do not, why does it not setup proper links for the page buttons?
-- Updates --
I need to download the styling from: https://getbootstrap.com/docs/3.3/customize/ to get the appropriate styling to work for .paginate and .paginate-md
Why does the react bootstrap styling and links fail for my case?
export default class MyPage extends React.Component {
constructor(props) {
super(props);
this.state = {
activePage: 1
};
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(eventKey) {
console.log('handle select', eventKey);
this.setState({
activePage: eventKey,
});
}
getPaginatedTable() {
var dataRows = Globals.Data["dataList"];
const totalPages = Math.ceil(dataRows.length/PER_PAGE_SIZE);
var startOffset = (this.state.activePage-1) * PER_PAGE_SIZE;
var startCount = 0;
return (
<div id="dataTableDiv">
<table>
<thead>
//mycolumns
</thead>
<tbody>
{ dataRows.map((dataRow, index) => {
if(index >= startOffset && startCount < PER_PAGE_SIZE){
startCount++;
return (<DataRowDisplay key={index} Data={data} />);
}
})
}
</tbody>
</table>
<Pagination bsSize="medium"
prev
next
first
last
ellipsis
boundaryLinks
items={totalPages}
maxButtons={MAX_PAGE_SIZE}
activePage={this.state.activePage}
onSelect={this.handleSelect}
/>
</div>
);
}
render() {
return (
<div>
{this.getPaginatedTable()}
</div>
);
}
