Question

我正在尝试使用实质性的UI分页来与我现有的逻辑配合使用，我引用了此

演示

以下代码呈现

Pagination.js

    <ul className="pagination">
        <li className={pager.currentPage === 1 ? 'disabled' : ''}>
            <a href="#" onClick={() => this.setPage(1)}>First</a>
        </li>
        <li className={pager.currentPage === 1 ? 'disabled' : ''}>
            <a href="#" onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>
        </li>
        {pager.pages.map((page, index) =>
            <li key={index} className={pager.currentPage === page ? 'active' : ''}>
                <a href="#" onClick={() => this.setPage(page)}>{page}</a>
            </li>
        )}
        <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
            <a href="#" onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>
        </li>
        <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
            <a href="#" onClick={() => this.setPage(pager.totalPages)}>Last</a>
        </li>
    </ul>

我试图使它看起来像这样，并使其正常工作。但是它不能正确地前进和后退，我什至不能前进。

我到目前为止有什么

        // what i have so far
        <TablePagination
            rowsPerPageOptions={[5, 10, 25]}
            component="div"
            count={pager.totalPages}
            rowsPerPage={10}
            page={0}
            backIconButtonProps={{
                'aria-label': 'Previous Page',
            }}
            nextIconButtonProps={{
                'aria-label': 'Next Page',
            }}
            onChangePage={() => this.setPage(pager.currentPage + 1)}
            onChangeRowsPerPage={() => this.setPage(pager.currentPage)}
        />

完整代码

Pagination.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TablePagination from '@material-ui/core/TablePagination';


const propTypes = {
    items: PropTypes.array.isRequired,
    onPageChange: PropTypes.func.isRequired,
    initialPage: PropTypes.number,
    pageSize: PropTypes.number
}

const defaultProps = {
    initialPage: 1,
    pageSize: 10
}
class Pagination extends Component{
    constructor(props){
        super(props);

        this.state = {
            pager: {}
        }
    }

    componentWillMount(){
        // set page if item array is null

        if(this.props.items && this.props.items.length){
            this.setPage(this.props.initialPage);
        }
    }

    handleChangePage = (event, page) => {
        this.setState({ page });
      };

    handleChangeRowsPerPage = event => {
        this.setState({ rowsPerPage: event.target.value });
    };
    // componentDidUpdate(prevProps,prevState){
    //     // reset page if items array has changed
    //     if(this.prop.items !== prevProps.items){
    //         this.setState(this.props.initialPage);
    //     }
    // }

    setPage(page){
        let {items, pageSize } = this.props;

        let pager = this.state.pager;

        if(page < 1 || page > pager.totalPages ){
            return;
        }
        // get new pager object for specified page
        pager = this.getPager(items.length, page, pageSize);

        let pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);

        // update state

        this.setState({
            pager:pager
        });

        // call change page function in app component/file
        this.props.onPageChange(pageOfItems);
    }

    getPager(totalItems, currentPage, pageSize){
        // default to first page

        currentPage = currentPage || 1;

        // default page size is 10

        pageSize = pageSize || 10;

        // calculate total pages

        const totalPages = Math.ceil(totalItems/pageSize);

        var startPage, endPage;

        if(totalPages <= 10){
            // less than 10 total pages so show all

            startPage = 1;
            endPage = totalPages;
        } else{
            // more than 10 pages, calculate start and end pages
            if(currentPage <= 6){
                startPage = 1;
                endPage = 10;
            }

            else if(currentPage + 4 >= totalPages){
                startPage = totalPages - 9;
                endPage = totalPages;

            }else{
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }


        // calculate start and end item indexes
        const startIndex = (currentPage - 1) * pageSize;
        const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to repeat in the pager control
        const pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);

        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };

    }
    // not used yet
    ArrowFunction = (page) => {
        const pager = this.state.pager;

        if(pager.currentPage === 1 ? 'disabled' : ''){
            this.setPage(pager.currentPage - 1)
        }
        else if(pager.currentPage === pager.totalPages ? 'disabled' : ''){
            this.setPage(pager.currentPage + 1);  
        }

    }
    render() {
        var pager = this.state.pager;

        if (!pager.pages || pager.pages.length <= 1) {
            // don't display pager if there is only 1 page
            return null;
        }

        return (



            // trying to use this logic below in Pagination

            // <ul className="pagination">
            //     <li className={pager.currentPage === 1 ? 'disabled' : ''}>
            //         <a href="#" onClick={() => this.setPage(1)}>First</a>
            //     </li>
            //     <li className={pager.currentPage === 1 ? 'disabled' : ''}>
            //         <a href="#" onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>
            //     </li>
            //     {pager.pages.map((page, index) =>
            //         <li key={index} className={pager.currentPage === page ? 'active' : ''}>
            //             <a href="#" onClick={() => this.setPage(page)}>{page}</a>
            //         </li>
            //     )}
            //     <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
            //         <a href="#" onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>
            //     </li>
            //     <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
            //         <a href="#" onClick={() => this.setPage(pager.totalPages)}>Last</a>
            //     </li>
            // </ul>

            // what i have so far
            <TablePagination
                rowsPerPageOptions={[5, 10, 25]}
                component="div"
                count={pager.totalPages}
                rowsPerPage={10}
                page={0}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={() => this.setPage(pager.currentPage + 1)}
                onChangeRowsPerPage={() => this.setPage(pager.currentPage)}
            />

        );
    }

}
Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;
export default Pagination;

App.js

import React, { Component } from 'react';
import './App.css';
import Pagination from './components/Pagination';
import OurTable from './components/Table';

class App extends Component {

  constructor() {
    super();

    const exampleItems = [...Array(150).keys()].map(i =>({
      id: (i+1), name: 'Item ' + (i+1)
    }));

    this.state ={
      exampleItems: exampleItems,
      pageOfItems: []
    }

    this.onPageChange = this.onPageChange.bind(this);
  }

  // will update the stes with new page of items and stuff
  onPageChange(pageOfItems){
    this.setState({
      pageOfItems: pageOfItems
    })
  }


  render() {
    // const pageOfItems = this.state;
    return (
      <div className="App">
          <h1>Pageination example</h1>
          <div class ="text-center"> 
              {/* {this.state.pageOfItems.map(item => 
                <div key={item.id}> {item.name}</div>

              )} */}

          <OurTable items={this.state.pageOfItems} />

          <Pagination items={this.state.exampleItems} onPageChange={this.onPageChange} />


          </div>

      </div>
    );
  }
}

export default App;

材质UI分页选项卡无法正确导航

0 个答案: