<<前 [TOP] 次>>
多くの注文を受けた時、ページのスクロールが大変なので１ページに表示する件数を１０件までにしたいという時にこの「ページネーション」を利用します。
これには、gemに「will_paginate」をインストールしなければなりません。
まずは「Gemfile」に「gem 'will_paginate'」と追記します。
【shop/Gemfile】
source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.10' # Use mysql as the database for Active Record gem 'mysql2', '>= 0.3.13', '< 0.5' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.1.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0' # bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Unicorn as the app server # gem 'unicorn' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' end group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console', '~> 2.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] gem 'coffee-script-source', '1.8.0' gem 'rails-i18n' gem 'will_paginate'
コマンドプロンプトで「shop」フォルダに移動して「bundle install」を実行します。
次に、サンプルのオーダを登録するためのスクリプトを作成します。
「shop」フォルダの中に「script」というフォルダを新規作成し、その中に「load_orders.rb」というファイルを新規作成します。
【script/load_orders.rb(新規作成)】
Order.transaction do (1..100).each do |i| Order.create(:name => "ScriptSample #{i}", :address => "#{i}SampleAddress", :email => "sample#{i}@sample.jp",:tel_number => "000-0000-0000", :pay_type =>"現金") end end
コマンドプロンプトで「shop」フォルダに移動して、「rails runner script/load_orders.rb」と入力し、スクリプトを実行します。
WEBrickを起動して、確認してみます。
注文内容は空ですが、オーダーは100件追加されています。
ordersコントローラの「index()」メソッドに「paginate()」メソッドを呼び出すように記述します。
【app/controllers/orders_controller.rb】
class OrdersController < ApplicationController before_action :set_order, only: [:show, :edit, :update, :destroy] # GET /orders # GET /orders.json def index @orders = Order.pagenate :page=>params[:page], :per_page =>10 respond_to do |format| format.html format.json { render json: @orders } end end # GET /orders/1 # GET /orders/1.json def show end # GET /orders/new def new @cart = current_cart if @cart.line_items.empty? redirect_to market_url, notice: 'カートは空です。' return end @order = Order.new respond_to do |format| format.html format.json { render json: @order } end end # GET /orders/1/edit def edit end # POST /orders # POST /orders.json def create @order = Order.new(order_params) @order.add_items(current_cart) respond_to do |format| if @order.save Cart.destroy(session[:cart_id]) session[:cart_id] = nil format.html { redirect_to market_url, notice: 'ご注文ありがとうございました。' } format.json { render json: @order, status: :created, location: @order } else format.html { render :new } format.json { render json: @order.errors, status: :unprocessable_entity } end end end # PATCH/PUT /orders/1 # PATCH/PUT /orders/1.json def update respond_to do |format| if @order.update(order_params) format.html { redirect_to @order, notice: '注文情報を更新しました。' } format.json { render :show, status: :ok, location: @order } else format.html { render :edit } format.json { render json: @order.errors, status: :unprocessable_entity } end end end # DELETE /orders/1 # DELETE /orders/1.json def destroy @order.destroy respond_to do |format| format.html { redirect_to orders_url, notice: 'Order was successfully destroyed.' } format.json { head :no_content } end end private # Use callbacks to share common setup or constraints between actions. def set_order @order = Order.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def order_params params.require(:order).permit(:name, :address, :email, :tel_number, :pay_type) end end
変更したindex()メソッドのみ抜粋します。
def index @orders = Order.paginate :page=>params[:page], :per_page =>10 respond_to do |format| format.html format.json { render json: @orders } end end
「:per_page」パラメータで１０ページごとの表示を指定しています。
次にindexビューにページネーションのリンクを追加します。
【app/views/orders/index.html.erb】
<% if notice %> <p id="notice"><%= notice %></p> <% end %> <br> <h1>注文一覧</h1> <br> <table> <thead> <tr> <th>注文ID</th> <th>注文内容</th> <th>氏名</th> <th>住所</th> <th>メールアドレス</th> <th>電話番号</th> <th>支払い方法</th> <th colspan="3"></th> </tr> </thead> <tbody> <% @orders.each do |order| %> <tr> <td><%= order.id %></td> <td> <% order.line_items.each do |item| %> [商品ID:<%= item.good.goods_id %>] [商品名：<%= item.good.title %>] [数量：<%= item.quantity %>] [金額：<%= (item.total_price).to_i %>円] <br> <% end %> </td> <td><%= order.name %></td> <td><%= order.address %></td> <td><%= order.email %></td> <td><%= order.tel_number %></td> <td><%= order.pay_type %></td> <td><%= link_to '詳細', order, :class => 'btn' %></td> <td><%= link_to '編集', edit_order_path(order), :class => 'btn' %></td> <td><%= link_to '削除', order, method: :delete, data: { confirm: '本当に削除してもよろしいですか？' }, :class => 'btn' %></td> </tr> <% end %> </tbody> </table> <br> <%= link_to '戻る',{:action=>"index", :controller=>"goods"}, :class => 'btn' %> <br> <br> <%= will_paginate @orders %>
追記したのは次の１行です。
<%= will_paginate @orders %>
どのように表示されるようになったから確認してみます。
注文が10件ずつの表示で全部で11ページに分割されました。
↓↓クリックして頂けると励みになります。
