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伺服器進行測試。