CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
sweeeeeet
sweeeeeet

Reputation: 1819

Bootstrap Rails, adding pagination to content index

I have this listing automatically generated by Rails. It lists the contents of my Database, and I want to Bootstrap it, adding pagination and some nice CSS.

<p id="notice"><%= notice %></p>

<h1>Listing Posts</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.name %></td>
        <td><%= post.title %></td>
        <td><%= post.content %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

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

This form appears in index.html.erb in the generated controller.

What is the fastest way to add some CSS on this kind of generated file? I already imported Bootstrap in the corresponding .scss file but is it really necessary to manually define bootstrap classes everywhere?

Can't I trick with some nice gem?

Upvotes: 0

Views: 2461

Answers (3)

BM5k
BM5k

Reputation: 1230

As far as I know there is no gem that will inject styling into your templates.

The simplest possible solution would be to add the bootstrap styling yourself. If you want the same basic structure application wide AND you're planning on using generators you could customize the appropriate template.

You can place your custom templates in lib/templates/TEMPLATE_ENGINE/GENERATOR_NAME/VIEW_NAME.html.ext

For example, to override haml views for rails' scaffold generator, you could create these files:

lib
├── tasks
└── templates
    ├── haml
    │   └── scaffold
    │       ├── _form.html.haml
    │       ├── edit.html.haml
    │       ├── index.html.haml
    │       ├── new.html.haml
    │       └── show.html.haml

See the guide for more info about customizing generators.

You only have to replace the templates for the views you want to customize.

There is one way that you can speed up the bootstrapificiation of your rails app: customizing the form builder. This will allow you to write your forms in a familiar way and have the bootstrap boilerplate added for you. simple_form is a great resource for that.

If you've already created/generated several views it will probably be easier to add the styling manually.

As far as pagination goes, kaminari seems to be the hotness these days, and you can easily customize the views (or possibly use a gem to customize them).

Keep in mind that customizing generator templates, configuring simple_form, and configuring pagination could wind up being more work than simply manually adding the styles yourself. However, it could pay off long term (especially if you're just starting a large project).

Upvotes: 1

Kumar
Kumar

Reputation: 3126

A nice one is the kaminari gem. Install it,

In your controller you can dom something like this,

@posts = Post.page(params[:page]).per(10)

where page() accepts the nth number page to dispaly and per(), how many posts to display in one page. In your views, simple put

<%= render @posts %><!-- You can wrap it with a table and bootstrap classes -->
<%= paginate @posts %><!-- At the end of the page. This will take care of pagination -->

For render posts, kaminari will look for a partial _post.html.erb by default by convention, inside views/posts/

  <tr>
    <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>

which will have the your content for a post. Remember in the partial you refer to a single post object like post and not @post.

Upvotes: 1

Uday kumar das
Uday kumar das

Reputation: 1613

use table class like:

<table class="table">

And use will_paginate bootstrap for the pagination.Here is the link https://github.com/bootstrap-ruby/will_paginate-bootstrap.

Upvotes: 1

Related Questions