Paginacja używając gema Kaminari

Przez:, Z dnia:

Ten tutorial pojawia się w więcej niż jednej ścieżce.

Kiedy pracujemy zaledwie z kilkoma rekordami, łatwo stworzyć z nich listę na stronie indeks. Ale co się stanie kiedy będziemy mieć dużo więcej rekordów, powiedzmy 100? Co jeśli 1000? Albo 1 milion? Jeżeli spróbujemy wyświetlić za jednym razem wszystkie rekordy z bazy danych na stronie, nie tylko długo będzie się ładować baza danych, ale też czas pobierania strony się zwiększy, i najprawdopodobniej przedlądarka się zawiesi.

Na szczęście, istnieje sposób na wycinanie danych w łątwiejszych do okiełznania kawałkach, których będziemy mogli użyć na oddzielnych stronach. Ten proces nazywa się paginacją.

Do tego procesu uzyjemy gema nazwanego "kaminari".

Krok 1: Dodaj Kaminari i Załaduj Gemy

Najpierw, dodaj kaminari do Gemfile:

Gemfile

gem 'kaminari'
gem 'kaminari-bootstrap'

Ponieważ używamy bootstrap, dodaliśmy kaminari-bootstrap tak, aby nasza strona wyglądała ładnie.

bash

$ bundle install

Możemy teraz poinstruować kontroler by dokonał paginacji na elementach listowanych. W zależności od tego, którą ścieżkę przerabiasz, będzie to dotyczyło albo postów, albo relacji bądź też użytkowników. Kod w większości będzie identyczny. Jedyną róźnicą będzie nazwa zmiennej.

Krok 2: Popracuj nad Postami

Jeżeli pracujesz nad postami, przejdź do posts_controller.rb i zastąp linijkę nowym kodem:

app/controllers/posts_controller.rb

def index
  # @posts = Post.all we will replace this old code - you can delete this line

  @posts = Post.order('created_at DESC').page(params[:page]).per(15)
end

Krok 3: Popracuj nad Użytkownikami

Jeżeli pracujesz nad użytkownikami, przejdź do users_controller.rb i zastąp linijkę nowym kodem:

app/controllers/users_controller.rb

def index
  # @users = User.all we will replace this old code - you can delete this line

  @users = User.page(params[:page]).per(30)
end

Krok 4: Popracuj nad Relacjami

Jeżeli pracujesz nad relacjiami, przejdź z powrotem do users_controller.rb i dodaj następujące linijki kodu:

app/controllers/users_controller.rb

def index
  # @sent_invites = current_user.sent_invites YOU CAN DELETE THIS LINE
  # @received_invites = current_user.received_invites YOU CAN DELETE THIS LINE

  @sent_invites = current_user.sent_invites.page(params[:page])
  @received_invites = current_user.received_invites.page(params[:page])
end

Krok 5: Dodaj przyciski nawigacyjne

Możemy teraz dodać przyciski nawigacyjne do widoków:

Jeżeli pracujesz nad postami:

app/views/posts/index.html.erb<

<%= link_to 'New Post', new_post_path %>

<div>
    <%= paginate(@posts) %>
    <ul>
        <% @posts.each do |p| %>
        <li>
            <h3><%= link_to p.title, post_path(p.id) %></h3>
            <p><small><strong>By:</strong> <%= p.user.email %></small></p>
            <p><%= p.body %></p>
        </li>
        <% end %>
    </ul>
    <%= paginate(@posts) %>
</div>

Jeżeli pracujesz nad użytkownikami:

app/views/users/index.html.erb

<div class="container">
    <div class="users row">
        <%= paginate(@users) %>
        <% @users.each do |user| %>
        <div class="panel panel-default">
            <%= link_to user_path(user) do %>
            <div class="panel-body">
                <%= image_tag(user.avatar.url(:medium)) %>
                <p><%= user.full_name %></p>
            </div>
            <% end %>
        </div>
        <% end %>
        <%= paginate(@users) %>
    </div>
</div>

Widzisz jak prosta jest paginacja używając kaminari. Wszystko co zajmuje czas to deklaracje w kontrolerze i używanie <%= paginate(@list_of_something) %> w miejscu, gdzie chcesz wyświtlać przyciski nawigacyjne. Jeżeli nie masz wystarczającej ilości rekordów by je wyświtlić, pobaw się opcją .per(). Po prostu określ ile kawałków chcesz widzieć na jednej tronie. Ostateczny rezultat powinien wyglądać jakoś tak:

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Komentarze

  • Z dnia: nate napisał:

    Really learned a lot from these. Hope to see more. Thank you!

  • Z dnia: nate napisał:

    Really learned a lot from these. Hope to see more. Thank you!

Dodaj komentarz

Możesz się zalogować by skomentować