How to sort Ruby table by column headers?

Question

I'm creating a To Do List App using Ruby on Rails and I wanted to know how I would go about sorting the information on the table by the headers that I have? Like i'd like to be able to click on "Title" "Client" or "Done" and it sort them ASC or DESC. Also a way to get them back in their original order if possible. T

Here is the code I'm trying:

projects_controller.rb:

class ProjectsController < ApplicationController

  before_action :set_project, only: [:show, :edit, :update, :destroy]
  helper_method :sort_column, :sort_direction

  def index
    @projects = Project.order(sort_column + " " + sort_direction)
  end

  private

  def sort_column
    Project.column_names.include?(params[:sort]) ? params[:sort] : "title"
  end

  def sort_direction
    %w[asc desc].include?(params[:direction]) ? params[:direction] : "asc"
  end


  # GET /projects
  # GET /projects.json
  def index
    @projects = Project.all
  end

  # GET /projects/1
  # GET /projects/1.json
  def show
  end

  # GET /projects/new
  def new
    @project = Project.new
  end

  # GET /projects/1/edit
  def edit
  end

  # POST /projects
  # POST /projects.json
  def create
    @project = Project.new(project_params)

    respond_to do |format|
      if @project.save
        format.html { redirect_to @project, notice: 'Project was successfully created.' }
        format.json { render :show, status: :created, location: @project }
      else
        format.html { render :new }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /projects/1
  # PATCH/PUT /projects/1.json
  def update
    respond_to do |format|
      if @project.update(project_params)
        format.html { redirect_to @project, notice: 'Project was successfully updated.' }
        format.json { render :show, status: :ok, location: @project }
      else
        format.html { render :edit }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /projects/1
  # DELETE /projects/1.json
  def destroy
    @project.destroy
    respond_to do |format|
      format.html { redirect_to projects_url, notice: 'Project was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_project
      @project = Project.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def project_params
      params.require(:project).permit(:title, :description, :hours, :payrate, :done, :client)
    end



end

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

index.html.erb:

<h1 id="title">Project List</h1>



  <table>
    <thead>
      <tr id="headers">
        <th><%= sortable "title" %></th>
        <th><%= sortable "client" %></th>
        <th>Description</th>
        <th>Hours</th>
        <th><%= sortable "done" %></th>
        <th colspan="3"></th>
      </tr>
    </thead>


    <tbody class="col-md-2" id="listItems">
      <% @projects.each do |project| %>
        <tr id="table">
          <td><%= project.title %></td>
          <td><%= project.client %></td>
          <td ><%= project.description %></td>
          <td><%= project.hours %></td>
          <td><%= check_box_tag "project_#{project.id}", "#{project.done}", project.done?, disabled: "#{project.done?}" %>
          </td>



          <td>
            <span title="Show">
              <%= link_to " #{image_tag('show.png')}".html_safe, project, id:'showButton' %>
            </span>
          </td>


          <td>
            <span title="Edit">
              <%= link_to " #{image_tag('edit.png')}".html_safe, edit_project_path(project), id:'editButton' %>
            </span>
          </td>

          <td>
            <span title="Delete">
              <%= link_to " #{image_tag('destroy.png')}".html_safe, project, id:'destroyButton', method: :delete, data: { confirm: 'Are you sure?' } %>
            </span>
          </td>

        </tr>
      <% end %>
    </tbody>
  </table>

  <br>

  <%= link_to 'New Project', new_project_path, id:"new" %>

Answer 1

There is a very good tutorial about it:

http://railscasts.com/episodes/228-sortable-table-columns

You should try this tutorial first, and if you still have questions, please ask again...

I hope it helps.