Ruby on Rails learning: Data paging and sorting in rails3

Will_paginate (http://blog.csdn.net/kunshan_shenbin/article/details/4182610 ),

Now we plan to integrate it into rails3. In addition, the Code also includes jqgrid integration.

1. Open gemfile and modify it as follows:

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

2. Execute rails g controller Report Index to create a controller named report.

3. Download The jqgrid Library: http://www.trirand.com/blog/ to the/APP/assets/folder.

Note: jquery. jqgrid. Min. js and the localized i18n folder should be placed in the/APP/assets/javascripts directory.

Put ui.jqgrid.css in the/APP/assets/stylesheets directory.

4. Modify: application. js

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

5. Modify: application.css

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

6. Modify: report_controller.rb. The Code is as follows:

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. Modify: 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. create the required model: model. Rb (create as needed)

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

9. Create and modify the views file as follows:

A. Modify: 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. Create: _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. Modify database. yml (database configuration)

11. Modify: routes. RB, append: Get "report/get_data"

12. will_paginate the required style file can be downloaded from here: http://mislav.uniqpath.com/will_paginate/

Then place the pagination.css file in the/APP/assets/stylesheets directory.

13. If the sequence prompt is ascending or descending, you can find some images on the Internet. Then modify the report.css. SCSs file as follows:

.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');}

Then you can start the thin server for testing.