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#