環境： ruby 1.8.7 + rails 2.1.0 

預覽效果:

步驟:

1,在helpers 添加 繼承 類

class RemoteLinkRenderer < WillPaginate::LinkRenderer

def prepare(collection, options, template)

@remote = options.delete(:remote) || {}

super

end

protected

def page_link(page, text, attributes = {})

@template.link_to_remote(text, {:url => url_for(page), :method => :get}.merge(@remote))

end

end

2,在config下的enviroment.rb 最后添加

WillPaginate::ViewHelpers.pagination_options[:class] = 'digg_pagination'

WillPaginate::ViewHelpers.pagination_options[:previous_label] = '上一頁'

WillPaginate::ViewHelpers.pagination_options[:next_label] = '下一頁'

WillPaginate::ViewHelpers.pagination_options[:renderer] = 'RemoteLinkRenderer'

3 建立css 樣式表

.digg_pagination { /* 樣式一 */

background: white;

/* self-clearing method: */ }

.digg_pagination a, .digg_pagination span {

padding: .2em .5em;

display: block;

float: left;

margin-right: 1px; }

.digg_pagination span.disabled {

color: #999;

border: 1px solid #DDD; }

.digg_pagination span.current {

font-weight: bold;

background: #2E6AB1;

color: white;

border: 1px solid #2E6AB1; }

.digg_pagination a {

text-decoration: none;

color: #105CB6;

border: 1px solid #9AAFE5; }

.digg_pagination a:hover, .digg_pagination a:focus {

color: #003;

border-color: #003; }

.digg_pagination .page_info {

background: #2E6AB1;

color: white;

padding: .4em .6em;

width: 22em;

margin-bottom: .3em;

text-align: center; }

.digg_pagination .page_info b {

color: #003;

background: #6aa6ed;

padding: .1em .25em; }

.digg_pagination:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden; }

* html .digg_pagination {

height: 1%; }

*:first-child+html .digg_pagination {

overflow: hidden; }

.apple_pagination {

background: #F1F1F1;

border: 1px solid #E5E5E5;

text-align: center;

padding: 1em; }

.apple_pagination a, .apple_pagination span {

padding: .2em .3em; }

.apple_pagination span.disabled {

color: #AAA; }

.apple_pagination span.current {

font-weight: bold;

background: transparent url(apple-circle.gif) no-repeat 50% 50%; }

.apple_pagination a {

text-decoration: none;

color: black; }

.apple_pagination a:hover, .apple_pagination a:focus {

text-decoration: underline; }

4,view中使用;

共找到<%= @messages.total_entries %>條記錄,共<%= @messages.total_pages %>頁.

<%= will_paginate @messages ,:remote => {:update => 'messages'} %>

這樣的做法， 是放在了enviroment.rb中，即是default的， 那么 我想單獨設置怎么辦呢。。。在view 中如下寫法即可以：

<%= will_paginate @messages , :renderer => 'RemoteLinkRenderer' , :class => 'apple_pagination' ,:previous_label => '<<上一頁', :next_label => '下一頁>>' %>

 Link:

http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html

http://weblog.redlinesoftware.com/2008/1/30/willpaginate-and-remote-links

http://thewebfellas.com/blog/2008/8/3/roll-your-own-pagination-links-with-will_paginate