Usage with Kaminari

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!
Custom reducers
Loading content later
Last modified 3mo ago
Copy link