will_paginate 自定义

20 May 2017

will_paginate 其还有一个竞争对手 kaminari 作者 Mislav Marohnic gihub员工,并有是hub,rbenv,等多个开源库的作者

用chrome的inspect功能戳开以后,发现will_paginate生成的html代码是这样的

相当于通过这样一行代码

<%= will_paginate @jobs %>

最终在html页面里生成了这样一组html代码 其结构也很简单,一个class是pagination的div标签 里面包裹了a + em两种元素(有时还有span)

可以对比着看一下

这样很明显,我们只需要去css里针对这pagination这个class以及它下面的a、em、span进行相应的设置就可以自定义成自己想要的样子了 比如,下面是我自己写的一点点CSS代码,will_paginate大变样

.pagination {
  a, .current {
    color: black;
    text-decoration: none;
    font-size: 20px;
    padding: 12px 16px 12px;
    background-color: white;
    border-radius: 60px;	
  }

  a:hover {
    color: white;
    background-color: #383838;
    border-radius: 24px;
  }

  .current {
    background-color: #383838;
    border-radius: 24px;
    // border-radius: 60px;
    font-style: normal;
    color: white;
  }
}

那么有人会问,如果我不想要previews和next呢,我希望显示成中文或别的字符,很简单:

<%= will_paginate @jobs , previous_label: "上一页", next_label: "下一页" %>

刷新页面 又有人会说,字体不好看,那就去css里改字体咯,so easy

will_paginate还有提供一些小方法,来进行小改动,有兴趣的可以 看这里

惊喜:

Chris Oliver又一个牛人

资源

Revisited: roll your own pagination links with will_paginate and Rails 3 https://gorails.com/dashboard https://richonrails.com/articles/getting-started-with-will-paginate http://codepen.io/matchboxhero/pen/bGHmJ #51 will_paginate - RailsCasts http://railscasts.com/episodes/51-will-paginate-revised?view=asciicast