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

以前在rails2时代使用过will_paginate ( http://blog.youkuaiyun.com/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服务器进行测试。