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:
# index.json.props
page_num = params[:page_num]
items_per_page = 20
​
json.posts do
  paged_posts = @posts
    .page(page_num)
    .per(items_per_page)
    .order(created_at: :desc)
​
  json.list do
    json.array! paged_posts do |post|
      json.id post.id
      json.body post.body
      json.edit_post_path edit_post_path(post)
    end
  end
​
  json.pagination_path posts_path
  json.current paged_posts.current_page
  json.total @posts.count
  json.page_size items_per_page
end
Let's grab one of those fancy pagination components from antd and some helpers
yarn add antd url-parse
Then in your component
class PostsIndex extends React.Component {
  onPaginateChange = (page) => {
    const pagination_path = this.props.posts
    let url = new parse(pagination_path, true)
    url.query.page_num = page
    url.query.props_at = 'shoots'
​
    this.props.visit(pagination_path)
  }
​
  render () {
    const {list, current, total} = this.props.posts
​
    return (
      <ul>
        {list.map(function(post){
          return <li>{post.body}</li>
        })}
        <Pagination
          showQuickJumper
          current={current}
          total={total}
          onChange={this.onPaginateChange}
        />
      </ul>
    )
  }
}
​
export default PostsIndex
Custom reducers
Loading content later
Last modified 7mo ago
Copy link