Question

我的应用程序中有很多页面。如何制作另一个按钮并使它变短？

Ex << 1、2、3、4、5、6、7、8、9、10 >>单击后>>将变为11,12,13,14,15,16,17,18 ，19,20

我希望可以像这样

enter image description here 我只知道该怎么做...

        const indexOfLastTodo = this.state.currentPage * this.state.todosPerPage;
        const indexOfFirstTodo = indexOfLastTodo - this.state.todosPerPage;
        const currentTodos = filteredDatas.slice(indexOfFirstTodo, indexOfLastTodo);
        const renderTodos = currentTodos.map((todo, index) => {
            return <SearchResults item={todo} testkey={index} account={this.state.accountData} key={index}></SearchResults>
        });
Collapse

const pageNumbers = [];
       for (let i = 1; i <= Math.ceil(filteredDatas.length / this.state.todosPerPage); i++) {
           pageNumbers.push(i);
       }

       const renderPageNumbers = pageNumbers.map(number => {
           return (
               <PaginationItem key={number}>
                   <PaginationLink key={number}
                       id={number}
                       onClick={this.handleClick} href=“#”>
                       {number}
                   </PaginationLink>
               </PaginationItem >
           );
       });
<Pagination aria-label=“Page navigation example”>
                           {renderPageNumbers}
                       </Pagination>

Answer 1

这是我的方法。

https://codesandbox.io/s/xpnp2k0214

演示：https://xpnp2k0214.codesandbox.io/

希望对您有帮助。

已编辑

说明：

//Data source
const allUsers = [
    {
        id: "1130",
        employee_name: "muaaa",
        employee_salary: "123",
        employee_age: "23",
        profile_image: ""
    }
    .....
];


//Local state for users array and tableOptions object. 
this.state = {
  users: [],
  isLoaded: false,
  tableOptions: {
    perpage: "10",
    page: 1,
    tot_count: 1
  }
};

//Set the default page to 1 when the component mounted. 
componentDidMount() {
    //Update the size of allUsers array
    let tableOptions = this.state.tableOptions;
    tableOptions.tot_count = allUsers.length;

    //Update the State
    this.setState({ tableOptions }, () => {
      this.setPage(1);
    });
}

//Update the users array and current page 
setPage = p => {
    let tableOptions = this.state.tableOptions;
    let page_size = parseInt(tableOptions.perpage);

    //Finding the limits of allUsers array from current page
    let from = (p - 1) * page_size;
    let to = from + page_size;

    //Slice the allUsers array with limit
    let users = allUsers.slice(from, to);
    tableOptions.page = p;

    //Update the State
    this.setState({ tableOptions, users, isLoaded: true });
};

//Generate the pagination from state.tableOptions  
getPagination = () => {
    let tOptions = this.state.tableOptions;
    let per_page = tOptions.perpage;
    let count = tOptions.tot_count;
    let pages = count / per_page;
    if (pages > 1) {
      let pgarr = [];
      pgarr[pages - 1] = 0;

      var _pages = [];
      let i = 0;
      for (; i < pages; i++) {
        _pages.push(i + 1);
      }
      let current_page = tOptions.page;
      let new_pages = [];

      if (_pages.length > 10) {
        let start = 0,
          end = 10;
        let _end = _pages[_pages.length - 1];
        let prev_page = parseInt(current_page - 5);
        if (prev_page > 0) {
          start = prev_page;
          end = parseInt(current_page + 5);
          end = end > _end ? _end : end;
        }
        for (i = start; i < end; i++) {
          new_pages.push(i + 1);
        }

        new_pages[0] = _pages[0];
        new_pages[new_pages.length - 1] = _pages[_pages.length - 1];
      } else {
        new_pages = _pages;
      }

      return (
        <div className="row">
          <div className="col" style={{ textAlign: "left" }}>
            {new_pages.map((p, i) => (
              <button
                key={i}
                style={
                  tOptions.page !== p
                    ? { backgroundColor: "red" }
                    : { backgroundColor: "green" }
                }
                onClick={() => this.setPage(p)}
              >
                {p}
              </button>
            ))}
          </div>
        </div>
      );
    } else {
      return <div />;
    }
  }; 

//Finally the rendering the users table with pagination.
render() {
    if (!this.state.isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <div className="row" style={{ marginBottom: "15px" }}>
            <div className="col">
              <table border="1">
                <thead>
                  <tr>
                    {Object.keys(this.state.users[0]).map((tr, i) => (
                      <td key={i}>{tr.split("_").join(" ")}</td>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {this.state.users.map((user, i) => (
                    <tr key={i}>
                      <td>{user.id}</td>
                      <td>{user.employee_name}</td>
                      <td>{user.employee_salary}</td>
                      <td>{user.employee_age}</td>
                      <td>{user.profile_image}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          {this.getPagination()}
        </div>
      );
    }

如果页面很多，如何处理分页？

1 个答案: