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

Question

我的应用中有很多页面。如何制作另一个按钮并缩短按钮？

我点击>>之后的<< 1,2,3,4,5,6,7,8,9,10 >>将成为11,12,13,14,15,16,17,18,19， 20

this is my design

我希望看起来像这样

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

但是：ぁzxswい

希望它会对你有所帮助。

编辑

说明：

https://xpnp2k0214.codesandbox.io/