Last Updated: February 25, 2016
·
4.701K
· 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 ·