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">← 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>Written by David Morrow
Related protips
2 Responses
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
Best
 #Jquery 
Authors
Filed Under
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#