Ruby On Rails 学习：Rails3中实现数据分页和排序

以前在rails2时代使用过will_paginate ( http://blog.csdn.net/kunshan_shenbin/article/details/4182610 ), 

现在打算把它集成进Rails3。另外, 代码中还包括了对JqGrid的集成。

1. 打开Gemfile，修改如下：

gem 'rails', '3.2.13'#gem 'sqlite3'gem 'mysql2'gem 'thin'gem 'will_paginate', '~> 3.0'gem 'jquery-ui-rails'

2. 执行 rails g controller Report index创建名为report的controller。

3. 下载JqGrid库：http://www.trirand.com/blog/ 放置到/app/assets/所对应的文件夹下。

注意：jquery.jqGrid.min.js，以及本地化i18n文件夹应该放到/app/assets/javascripts目录下。

ui.jqgrid.css应该放到/app/assets/stylesheets目录下。

4. 修改：application.js

//= require jquery//= require jquery_ujs//= require jquery.ui.all//= require ./jquery.jqGrid.min.js//= require_tree .

5. 修改：application.css

 *= require_self *= require jquery.ui.all *= require_tree .

6. 修改：report_controller.rb，代码如下：

class ReportController < ApplicationController    helper_method :sort_column, :sort_direction    def index    @data = Model.paginate(:page => params[:page], :per_page => 10).order(sort_column + " " + sort_direction)  end    def get_data    page = params[:page] ? params[:page].to_i : 1    rows = params[:rows].to_i    sidx = params[:sidx]    sord = params[:sord]    count = Model.count    @data = Model.order(sidx + " " + sord).limit(rows).offset((page-1)*rows)    total = (count / rows).ceil       data = @data.collect {|o| {"cell" => {      :id => o.id,       :name => o.name,       :date => o.date,    }}}    result = {"page" => page, "total" => total, "records" => count, "rows" => data }    respond_to do |format|      format.html # index.html.erb      format.json { render json: result }    end  end    private  def sort_column    Model.column_names.include?(params[:sort]) ? params[:sort] : "date"  end    def sort_direction    %w[asc desc].include?(params[:direction]) ? params[:direction] : "asc"  end  end

7. 修改：application_helper.rb

module ApplicationHelper    def sortable(column, title = nil)    title ||= column.titleize    css_class = column == sort_column ? "current #{sort_direction}" : nil    direction = column == sort_column && sort_direction == "asc" ? "desc" : "asc"    link_to title, {:sort => column, :direction => direction}, {:class => css_class}  end  end

8. 创建所需的model: model.rb (请按实际情况自行创建)

class Model < ActiveRecord::Base  set_table_name "tables"end

9. 创建和修改views文件如下：

a. 修改：index.html.erb

<%= render "model" %><br><table id="list1"></table><div id="pager1"></div><script type="text/javascript">(function() {$("#list1").jqGrid({   url:'report/get_data',datatype: "json",   colNames:['ID', 'Name', 'Date'],   colModel:[   {name:'id',index:'id', width:100},   {name:'name',index:'name', width:100},   {name:'date',index:'date', width:100}   ],   rowNum:20,   autowidth: true,   height:'auto',   rowList:[20,50,100],   pager: jQuery('#pager1'),   sortname: 'id',    viewrecords: true,    sortorder: "desc",    caption:"Model List"}).navGrid('#pager1',{edit:false,add:false,del:false});}).call(this);</script> 

b. 创建：_model.html.erb

<table>  <tr class="pretty">    <th><%= sortable "name", "Name" %></th>    <th><%= sortable "date", "Date" %></th>  </tr><% @data.each do |d| %>  <tr>    <td><%= d.name %></td>    <td><%= d.date %></td>  </tr><% end %></table><br><div class="digg_pagination">  <div class="page_info">    <%= page_entries_info @data %>  </div>  <%= will_paginate @data, :container => false %></div>

10. 修改database.yml(数据库配置)

11. 修改：routes.rb, 追加：get "report/get_data"

12. will_paginate所需样式文件可以从这里下载：http://mislav.uniqpath.com/will_paginate/

然后把pagination.css文件放置到/app/assets/stylesheets目录下。

13. 如果需要排序时提示是升序还是降序，可以从网上找些图片，然后修改report.css.scss文件如下：

.pretty th .current {  padding-right: 12px;  background-repeat: no-repeat;  background-position: right center;}.pretty th .asc {  background-image: url('/assets/up_arrow.gif');}.pretty th .desc {  background-image: url('/assets/down_arrow.gif');}

然后可以启动Thin服务器进行测试。