Использование Rails и HTML для просмотра, сортировки и поиска в таблицах.

Идея написать этот блог возникла во время моего проекта Mod2 в школе Flatiron, в ходе которого мой партнер Остин Бюлер и я решили создать оптимизатор состава фэнтези-футбола. Мы создали большой пул игроков НФЛ, и очень быстро я понял, что нам нужно отсортировать и отфильтровать эту таблицу по нескольким атрибутам, а также выполнить поиск в таблице определенных значений. К сожалению, я понятия не имел, как это сделать. Так началось мое погружение в мир таблиц, HTML и Rails.

Создание таблиц на страницах просмотра HTML

Начнем с определения нашей таблицы игроков НФЛ. У каждого игрока есть атрибуты имени, атрибут положения и общий рейтинг.

#views/players/index.html.erb
<h1>Players List</h1>
<table>
  <tr>
    <th>Player Name </th>              <-- Each of these
    <th>Position </th>                      is a column header
    <th>Avg. Ranking </th>
  </tr>
 <% @players.each do |player| %>
  <tr>
    <td><%= player.name%></td>         <-- Each of these adds
    <td><%=player.position %></td><td>     data to the corresponding
    <td><%=player.avg_ranking %></td>      column in the same row
  </tr>
  <% end %>
 </table>

Это просто комбинация HTML-тегов и методов рельсов:

• Тег <table> определяет таблицу HTML.
• Каждая строка таблицы определяется тегом <tr>
• Каждый заголовок таблицы определяется тегом <th>
• Каждые данные / ячейка таблицы определяются тегом <td>
• Обертки ‘‹% = ’и‘% ›’ обозначают код Ruby.

Сортировка

Теперь, когда наша таблица настроена, нам нужно добавить некоторые функции, чтобы упростить ее сортировку.

Первое, что мы сделаем, это сделаем заголовки таблиц ссылками, поэтому нам нужно будет добавить link_to перед текстом каждой ячейки заголовка. Страница, на которую должна переходить каждая ссылка, - это та же страница, на которой мы находимся, но с другими параметрами строки запроса. Для этого нам просто нужно указать хэш в качестве второго параметра link_to.

Наш новый код выглядит так:

<h1>Players List</h1>
<table>
  <tr>
    <th><%= link_to "Player Name", :sort => "name"%> </th>
    <th><%= link_to "Position", :sort => "position"%> </th>
    <th><%= link_to "Avg. Ranking", :sort => "avg_ranking"%> </th>
  </tr>
<% @players.each do |player| %>
  <tr>
    <td><%= player.name%></td>
    <td><%=player.position %></td><td>
    <td>  <%=player.avg_ranking %></td>
  </tr>
  <% end %>
  </table>

А наша таблица выглядит так:

Теперь нам нужно изменить действие индекса в PlayersController.

class PlayersController < ApplicationController
  def index
    @players = Player.order(params[:sort])
  end

Теперь, когда мы щелкаем столбец, он сообщает индексу, что нужно отобразить новую таблицу, отсортированную по соответствующему атрибуту столбца. Это будет выглядеть так:

Это неплохо, но поскольку средний рейтинг - это созданный мной метод, а не атрибут столбца, мы получим ошибку, если попытаемся выполнить сортировку по нему. Давайте исправим это с помощью небольшой условной логики (привет моему партнеру по проекту Mod2 Остину Бюлеру за помощь мне в этом)

class PlayersController < ApplicationController
  def index
    if params[:sort] != "avg_ranking"
      @players = Player.order(params[:sort])
    elsif params[:sort] == "avg_ranking"
      @players = Player.all.sort_by{|player| player.avg_ranking}
    else
      @players = Player.all
    end
  end

Searching

Последний шаг - дать нам возможность искать в таблице имя конкретного игрока.

Начнем с добавления строки поиска на страницу нашего проигрывателя, используя следующий код:

<%= form_tag(players_path, method: :get) do %>
  <p> Search for a player </p>
  <%= text_field_tag(:search, params[:search]) %>
  <%= submit_tag ("Search") %>
<% end %>

Наша страница теперь будет выглядеть так:

Все, что вводится в строку поиска, будет установлено как значение: search в нашем хэше params (params [: search]).

Теперь давайте изменим наш контроллер Players, чтобы дополнительно обновить действие index.

class PlayersController < ApplicationController
  def index
    if params[:search]
      search_players
    if params[:sort] == "avg_ranking"
      @players = Player.all.sort_by{|player| player.avg_ranking}      
    elsif params[:sort] != "avg_ranking"
     @players = Player.order(params[:sort])
    else
      @players = Player.all
    end
  end
def search_players
    if @player = Player.all.find{|player| player.name.include?(params[:search])}
      redirect_to player_path(@player)
    end
  end
def show
    @player = Player.find(params[:id])
  end
end

Теперь, когда мы ищем имя в нашей таблице игроков, мы получаем следующее:

И это все, что вам нужно знать, чтобы начать создавать, сортировать и искать таблицы в Rails!