B
B
Breezy
Search…
Usage with Kaminari
SPA pagination is pretty easy to add with Kaminari and any component library you wish to use. Let's use antd as an example:
1
# index.json.props
2
page_num = params[:page_num]
3
items_per_page = 20
4
5
json.posts do
6
paged_posts = @posts
7
.page(page_num)
8
.per(items_per_page)
9
.order(created_at: :desc)
10
11
json.list do
12
json.array! paged_posts do |post|
13
json.id post.id
14
json.body post.body
15
json.edit_post_path edit_post_path(post)
16
end
17
end
18
19
json.pagination_path posts_path
20
json.current paged_posts.current_page
21
json.total @posts.count
22
json.page_size items_per_page
23
end
Copied!
Let's grab one of those fancy pagination components from antd and some helpers
1
yarn add antd url-parse
Copied!
Then in your component
1
class PostsIndex extends React.Component {
2
onPaginateChange = (page) => {
3
const pagination_path = this.props.posts
4
let url = new parse(pagination_path, true)
5
url.query.page_num = page
6
url.query.bzq = 'shoots'
7
8
this.props.visit(pagination_path)
9
}
10
11
render () {
12
const {list, current, total} = this.props.posts
13
14
return (
15
<ul>
16
{list.map(function(post){
17
return <li>{post.body}</li>
18
})}
19
<Pagination
20
showQuickJumper
21
current={current}
22
total={total}
23
onChange={this.onPaginateChange}
24
/>
25
</ul>
26
)
27
}
28
}
29
30
export default PostsIndex
Copied!
Last modified 3mo ago
Copy link