Using Code Igniter pagination class with bootstrap 4.0-beta2

Code igniter have a helper class to generate pagination for a page. This class is fairly primitve but highly customizable, and since I’m lazy mood I gooogle around finding some ways to customize it to work with bootstrap 4.0-beta2. So at first I came across this snippet: but this snippet do well in mimicking the look but was annoying to use.
The problem is: Codeiginiter pagination class allow you to wrap the link ( <a> tag) between some others custom tags. Bootstrap however require you add class .page-link in those tag directly. The snippet above solve this by wrapping tag around a tag, produce something like this:

This look good but you cannot click on the <span> square, you have to click on the number itself to change page. And this is quite annoying on touch interface. And so I set out to create my own snippet. And the first thing in order  is to get rid of all those <span> wrapping class. Then we can add all those class with a simple javascript line:

<script type="text/javascript">$("nav > ul.pagination a").addClass("page-link");</script>

The full snippet can be found here:

This is definitely not some complex hack. But since the problem is so subtle that it slips pass my notice for months, I thougth it would worth the effort to take note in case I ran into this problem sometimes later.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.