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
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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#