Rails应用分页: Will Paginate

Use will_paginate to Seperate Pages

It's a common practice to use pagination if there are too many stuff on your website, because no one want to scroll down to an endless page. And will_paginate is cool gem to solve this problem! Here is a simple guide to use.

Add Gem

First thing you need to do is to add will_paginate gem to you Gemfile. Just add gem 'will_paginate', '~> 3.0.5' to your Gemfile and run bundle install and restart your server.

Change controller

Say you want to add pagination for you post index page, then you just need a little change to index congtroller.

#without paginagtion
class PostsController < ApplicationController
    def index
        @posts = Post.all.order('created_at desc')
    end
end
#with pagination
class PostsController < ApplicationController
    def index
        @posts = Post.all.order('created_at desc').paginate(page: params[:page], per_page: 7)
    end
end

Add Pagination to View

Just add this line of code to your view page <%= will_paginate @posts %> and then that's it. You may also want to add some CSS to make it pretty. Here is the SCSS code for my pagination.

.pagination:before,
.pagination:after {
    content: " ";
    display: table;
}

.pagination:after {
    clear: both;
}

.pagination {
    text-align: center;
    margin: 0 0 3em 0;
    a, .previous_page, .current, .next_page {
        padding: .75em 1em;
        margin: 0 .5em;
        border-radius: .15em;
        line-height: 20px;
        text-decoration: none;
        background: $white;
        font-weight: 700;
        font-size: .7em;
        font-style: normal;
        color: $dark;
        &:hover {
            background: $highlight;
            color: $white;
        }
    }
    .current {
        background: $highlight;
        color: $white;
    }
    .disabled {
        color: #C0C0C0;
        &:hover {
            color: #C0C0C0;
            background: $white;
        }
    }
}

戳这看效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木宛城主

SharePoint 2013 Step by Step—— How to Upload Multiple Documents in Document Library

How to Upload Multiple documents in SharePoint 2013,Options to add multiple file...

1999
来自专栏10km的专栏

cmake:vs2015/MinGW静态编译leveldb

leveldb是google的开源项目(https://github.com/google/leveldb), 在linux下编译很方便,然而官方版本却没有提供...

4836
来自专栏cmazxiaoma的架构师之路

VMware WorkStation的烦心事

1532
来自专栏运维

CentOS6.3 x86_64位安装xfce4桌面vncserver服务

CentOS6.3 x86_64位安装xfce4桌面vncserver服务 注意这里用的是最小化安装纯净系统212个包CentOS-6.3-x86_64-...

1131
来自专栏后台及大数据开发

CentOS下redis集群安装

环境: 一台CentOS虚拟机上部署六个节点,创建3个master,3个slave节点

1082
来自专栏技术之路

Qt学习笔记 ListWidget的增删改

学习了一下ListWidget控件的使用,做一个小功能增删改 先把代码分解最后给出完整代码 在窗体上添加一个ListWidget 一个Horizontal Sp...

2046
来自专栏张善友的专栏

Setting Up KeePass For Centos 6

This mini-howto describes how to set up KeePass on Centos 6. It requires buildin...

2058
来自专栏数据库新发现

Use EMC powermt to solve PowerPath Problem

http://www.eygle.com/unix/Use.EMC.Powermt.Solve.Config.Problem.htm

1253
来自专栏游戏杂谈

Lua游戏开发参考资料收集

What is a good game engine that uses Lua? [closed]

1431
来自专栏一个会写诗的程序员的博客

Kotlin 使用 Spring WebFlux 实现响应式编程 Kotlin 使用 Spring WebFlux 实现响应式编程参考资料

IBM的研究称,整个人类文明所获得的全部数据中,有90%是过去两年内产生的。在此背景下,包括NoSQL,Hadoop, Spark, Storm, Kylin在...

1544

扫码关注云+社区