如何为反应引导程序分页进行分页

问题描述

我正在使用 React.js 开发基于 Web 的应用程序。我已经使用 axios 从 sqlite 数据库中获取数据，并且我成功地在 react bootstrap 表中显示了数据。但是，数据列表很长，我不得不使用分页来查看数据。

这是我的反应表代码-

import React,{ Component } from "react";
import { Link } from "react-router-dom";
import SignInForm from "./SignInForm";
import SignUpForm from "./SignUpForm";
import { getElementError } from "@testing-library/react";
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactBootStrap from "react-bootstrap";
import axios from 'axios';
import paginationFactory,{ PaginationProvider } from 'react-bootstrap-table2-paginator';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';  

class HomePage extends Component {
 constructor() {
   super();

   this.state = {
    storage:[
      {
        name:"",weight:"",height:"",}
    ],options:"",data:"",//storage: [],};
 
 
 } 

 componentDidMount () {
   axios
   .get('http://localhost:9000/users/patientDetails')
   .then((res) => { const storage = res.data;
            this.setState({storage})
   })
   
   .catch(err => {
     console.error(err);
   });
    
  
 }



 render() {
 
   const {storage} = this.state;
   
   
    const options = {  

                             page: 2,sizePerPagelist: [ {  
     
                               text: '5',value: 5  
     
                             },{  
     
     
                               text: '10',value: 10  
     
                             },{  
     
                               text: 'All',value: this.state.storage.length  
     
                             } ],sizePerPage: 5,pageStartIndex: 0,paginationSize: 3,prePage: 'Prev',nextPage: 'Next',firstPage: 'First',lastPage: 'Last',paginationPosition: 'top'    
     
                           };  
return (
<div>
<ReactBootStrap.Table striped bordered hover variant=""  pagination={ paginationFactory(options) }>
               <thead>
           <tr>
             <th>Name</th>
             <th>Weight</th>
             <th>Height</th>
             {/*<th>Status</th>*/}
           </tr>
                </thead>
                
                <tbody>
              
                { this.state.storage.map(person => 
                
                  <tr>
                  <td>{person.name}</td> 
                  <td>{person.weight}</td>
                  <td>{person.height}</td>
                  </tr>
                 
                
       )}
        
            
           </tbody>
                
         </ ReactBootStrap.Table>
   </div>
);
 }
}

Table output

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）