react-native - React Native - 在reactjs中,如何對錶進行分頁

我要顯示json文件中的數據,有500多條記錄,希望每頁顯示10條記錄。

时间: 作者:

有上百種不同的方法可以做到,這裡有一個手動的版本:


 {this.state.filteredData


 .slice(this.state.activePage * 10, (this.state.activePage + 1) * 10)


 .map(results => ( ...


 ))}



.....



 {/*Pagination goes here */}



 <button onClick={() => {this.setState({activePage: this.state.activePage - 1})}} >


 prev</button>


 <button onClick={() => {this.setState({activePage: this.state.activePage + 1})}} >


 next</button>



作者:


const [index, setIndex] = React.useState(0);


const PAGE_SIZE = 10;


const tableData = cardData.data.Table.slice(index, index + PAGE_SIZE);



const table = {tableData.map(results => (


 <div className="col-sm-3">


 <h3>


 {results.first_name} {results.last_name}


 </h3>


 <h3 >{results.manager}</h3>


 <div className="row">


 <div className="col-md-3 col-sm-6"> {results.Department}</div>


 </div>



 <Link


 to={{ pathname: `/cards/${results.id}`, state: results }}


 className={`card-wrapper restore-${results.id}`}


 >


 View Detail


 </Link>


 </div>


 ))}



const navigation = (


 <div>


 <div disabled={index <= 0 ? true : false} onClick={() => setIndex(index - PAGE_SIZE)}>Prev</div>


 <div disabled={index <= cardData.data.Table.length ? true : false} onClick={() => setIndex(index + PAGE_SIZE)}>Next</div>


 </div>


);




作者:
...