我需要一个分页算法帮助我的代码?
问题描述:
我的网页和pageSize的由组件回调提供的,这是我的代码:我需要一个分页算法帮助我的代码?
renderTodos(page=0, pageSize=3) {
if(page) {
this.setState({
current: page,
page: page
})
}
var f = this.state.page*2;
var x = this.state.page*2;
console.log("page ", f)
console.log("page ", x+1)
return this.props.todos.slice(f,x+1).map((todo,todoIndex) => {
return <Todo
key={todo.id}
{...todo} // pass all the todo property
onClick={() => onTodoClick(todo.id)}
onTrashClick={() => onDeleteClick(todo.id, todoIndex)}
handleSelectedTodo = {this._handleSelectedTodo}
isChecked={this.state.checkedIds.includes(todo.id)}
/>
})
}
我的问题是我有问题,选择合适的指标,比方说我是伴随着第2页(提供回调上pageSize)我想选择第4到第6个索引,因为我的pageSize是3,而当我在第3个索引时,我想选择第7到第9个索引等等,但我无法弄清楚使用什么算法。帮帮我?
答
这个怎么样?
renderTodos(page=0, pageSize=3
{
if(page) {
this.setState({ current: page, page: page })
}
var f = page * pageSize;
var l = f + pageSize;
return this.props.todos.slice(f, l).map((todo,todoIndex) => {
return <Todo key={todo.id} {...todo} // pass all the todo property
onClick={() => onTodoClick(todo.id)}
onTrashClick={() => onDeleteClick(todo.id, todoIndex)
handleSelectedTodo = {this._handleSelectedTodo
isChecked={this.state.checkedIds.includes(todo.id)} />
})
}
对于第1页,pageSize的3:索引开始从3(第四元件)和切片结束索引是3 + 3 = 6。所以slice会返回索引3,4,5(第四,第五,第六)的元素