Last Updated: February 25, 2016
·
5.243K
· david morrow

Convert will_paginate output to Bootstrap markup

Problem

  • You are using will_paginate gem and Twitter bootstrap
  • You want the markup generated in twitter bootstrap format

Options

  • You could write your own custom renderer helper in ruby to render the markup how you want
  • You could reformat the markup clientside with js after render

Here is the client side solution

$(document).ready(function () {
  $('.pagination .previous_page').text('«');
  $('.pagination .next_page').text('»');

  $('.pagination').each(function () {
    var $bar = $(this);
    $bar.find('a, .current, span').wrapAll('<ul>');
    $bar.find('a, .current, span').wrap('<li>');

    $bar.find('em').each(function () {
      $(this).parent().addClass('disabled');
      $(this).replaceWith('<a href="#">' + $(this).text() + '</a>');
    });
  });
});

this will take the following will paginate html

<div class="pagination">
  <span class="previous_page disabled">&#8592; Previous</span>
  <em class="current">1</em>
  <a rel="next" href="/admin/accounts?page=2">2</a>
</div>

And convert it to what Bootstrap CSS is written for

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>

2 Responses
Add your response

Hi David!

I'm use this wrapper in my initializer folder:
https://gist.github.com/marcio/5808694#file-will_paginate-rb

over 1 year ago ·

nice, thats certainly more elegant than doing it client-side.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside