1.Giới thiệu

Xin chào các bạn, hôm nay mình sẽ giới thiệu cho các bạn một kỹ thuật đó là đánh số thứ tự (index) trong một danh sách bản ghi khi kết hợp với phân trang. Đây là kỹ thuật tuy đơn giản, nhưng đối với những bạn mới làm quen với ngôn ngữ ruby thì chắc còn gặp phải một chút khó khăn.

2. Hướng dẫn cài đặt

Đầu tiên chúng ta thêm gem phân trang trong Gemfile

gem  "bootstrap-will_paginate", "1.0.0"

vào sau đó

rails bundle install

Mình sẽ tạo ra một model User với các trường name, age, email và address, sau đó chạy migrate

rails g model User name:string age:integer email:string address:string
rails db:migrate

Bây giờ chúng ta sẽ tạo dữ liệu để đổ vào model vừa tạo ra bằng cách thêm trong file seeds.rb ở folder db. Ở đây mình thêm 20 bản ghi như sau.

puts "Create user"
20.times do |n|
  User.create(
    name: "Nguyễn Văn A #{n+1}",
    age: 18,
    email: "email#{n+1}@gmail.com",
    address: "Ha Noi"
  )
end

Sau đó chạy lệnnh này rails db:seed
Tiếp theo mình sẽ tạo controller cho User, các bạn chú ý Users phải là số nhiều nhé

rails g controller Users index

Mở users_controller.rb trong thư mục controllers và sửa thành như sau:

class UsersController < ApplicationController
  def index
    @users =User.page(params[:page]).per_page 10
  end
end

Trong đoạn code trên mình phân trang để hiển thị 10 users trên một trang. Các bạn có thể thay đổi số lượng users muốn hiển thị trên một trang bằng cách sửa lại sô 10 ở trên.
Bạn tìm đếnfile index.html.erb trong views/users và thêm code sau:

<h1 class="text-center" style="color: red;">Users list</h1>
<div class="col-md-10 col-lg-offset-1">
  <table class="table text-center" style="border: 2px solid black;">
    <tr class="bg-primary">
      <th class="text-center col-md-1">index</th>
      <th class="text-center col-md-3">name</th>
      <th class="text-center col-md-2">Age</th>
      <th class="text-center col-md-3">Email</th>
      <th class="text-center col-md-3">Address</th>
    </tr>
      <% @users.each_with_index do |user, index| %>
        <tr class="bg-success">
          <td><%= index %></td>
          <td scope="row"><%= user.name %></td>
          <td scope="row"><%= user.age %></td>
          <td scope="row"><%= user.email %></td>
          <td scope="row">