Using pagination with Twitter Bootstrap framework

[ljones]

I am working on adapting Ryan's blog profile to work with the Twitter Bootstrap framework. Everything is moving along pretty well, but I have hit a roadblock with Pagination.

Twitter framework uses these classes

<div class="pagination">
<li class="disabled">
<li class="active">

Is there an easier solution than editing the MarkupPagerNav.module code?

It's a little over my head, and I am concerned about changing module code.

This is where I last looked and decided that I was a bit uncomfortable changing this code and trying to keep up with it with future upgrades etc.

Is it easier than I think? Is there a way to make these changes without editing the module? Can you even change the protected $options code?

MarkupPagerNav generates it's own HTML5/XHTML markup. To modify it's markup
* or options, specify a second $options array to the render() method. See
* the MarkupPagerNav::$options to see what defaults can be overridden.
/**
* Options to modify the behavior and output of MarkupPagerNav
*
* Many of these are set automatically.
*
*/
protected $options = array(

// number of links that the pagination navigation should have (typically 10)
'numPageLinks' => 10,

// get vars that should appear in the pagination, or leave empty and populate $input->whitelist (preferred)
'getVars' => array(),

// the baseUrl from which the navigiation item links will start
'baseUrl' => '',

// the current Page, or leave NULL to autodetect
'page' => null,

// List container markup. Place {out} where you want the individual items rendered.
'listMarkup' => "\n<ul class='MarkupPagerNav'>{out}\n</ul>",

// List item markup. Place {class} for item class (required), and {out} for item content.
'itemMarkup' => "\n\t<li class='{class}'>{out}</li>",

// Link markup. Place {url} for href attribute, and {out} for label content.
'linkMarkup' => "<a href='{url}'><span>{out}</span></a>",

// label used for the 'Next' button
'nextItemLabel' => 'Next',

// label used for the 'Previous' button
'previousItemLabel' => 'Prev',

// label used in the seperator item
'separatorItemLabel' => '…',

[adamspruijt]

Two quick things really.

1) Make sure your pagination output is wrapped in a div with the class "pagination" (this will get you about 90% of the way)

like this

<div class="pagination">
 <?php echo $yourPageArray->renderPager() ?>
</div>

2) Find the pagination css in bootstrap that contains the "active" state

looks like this

.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span{
 background-color: #f5f5f5;
}

and change it to include the Processwire "MarkupPagerNavOn" class

like this

.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span,
.pagination ul > .MarkupPagerNavOn > a,
.pagination ul > .MarkupPagerNavOn > span {
 background-color: #f5f5f5;
}

and that should do it.

Hope this helps!

[ljones]

Thanks adamspruijt,

I'm a designer, not a coder, I can hack things to some extent, but the blog profile does not seem to have any way to wrap a div without doing so in the MarkupPagerNav.module, so I did it there:

// List container markup. Place {out} where you want the individual items rendered. MarkupPagerNav
'listMarkup' => "\n<div class='pagination'>\n<ul>{out}\n</ul>\n</div>",

And I made this change as well:

'currentItemClass' => 'active', 

Bootstrap does not use a span, so I took them out here:

// List item markup. Place {class} for item class (required), and {out} for item content.
'itemMarkup' => "\n\t<li class='{class}'>{out}</li>",

I am not sure if this is a proper way to do this, but it works, as I tested it. I don't even know what specify a second $options array to the render method means. But I have come a long way..This is the first time that I had the courage to hack around in a module.

Doing it this way means I don't have to edit the Bootstrap.css, but it does mean that I have to keep up with the edits to the module.

[ryan]

All of the markup and classes can be specified from the $options to MarkupPagerNav's render() method. Originally I had the Blog profile using Zurb Foundation and so had it outputting in Foundation-specific markup/classes for pagination. Doing the same thing with Bootstrap is certainly possible and should be relatively simple. Take a look in /site/templates/blog.inc and find the renderPosts() function. At the bottom of that function is this line:

if($posts->getLimit() < $posts->getTotal()) $out .= $posts->renderPager();

You'd want to change it to specify an $options array to the renderPager() function, like this:

$options = array(
 'listMarkup' => "<ul class='MarkupPagerNav'>{out}</ul>",
 'itemMarkup' => "<li class='{class}'>{out}</li>",
 'linkMarkup' => "<a href='{url}'><span>{out}</span></a>",
 'currentItemClass' => 'MarkupPagerNavOn'
);

if($posts->getLimit() < $posts->getTotal()) $out .= $posts->renderPager($options);

Change the markup and class names as you see fit. There are many other things you can specify in this options array (I've just included a few examples above). For a full list of options you can specify, see the $options array present near the top of this file: /wire/modules/Markup/MarkupPagerNav/MarkupPagerNav.module

[ljones]

Ryan,

That was exactly what I needed. That makes a lot more sense than editing the core module.

Thanks!!!