Spruce Up Drupal 7 Pagination Links with jQuery UI

Functionally speaking the Drupal pager works great. Easy to use, pages through stuff, can’t really complain on that front. But by default they’re pretty ugly. Luckily, hidden inside Drupal itself, there’s an easy way to pretty up your pagination links; jQuery UI Buttons.

First let’s have a look at the default pager links

As I said, they aren’t much to look at. But thankfully we can fix that. We’re going to use the .button() function to theme the pager links in the jQuery UI button style. To do this, we’ll need to include the button UI library. Easiest way is to add a template_preprocess_html() call in your template.php file. It would look something like this;

/**
 * Implements template_preprocess_html().
 */
function mytheme_preprocess_html(&$variables) {
  // Enable the jQuery UI button library
  drupal_add_library('system', 'ui.button');
}

The reason we put this into preprocess_html instead of preprocess_page is due to the fact that all the javascript and stylesheets are already aggregated by the time preprocess_page is called. By doing so before the HTML is processed, we can safely include the javascript files without any headaches (see including javascript files in preprocess_page in Drupal 6)

Next up, let’s add some javascript to enable the buttons on pager links. You can do this in two ways

  1. Add a javascript file in your .info file to be included in the ‘scripts’ array
  2. Add a javascript file during preprocess_html()

Personally, I prefer to toss the javascript include call into template_preprocess_html(). That way I have greater control over when or if I want that javascript included. I also typically create files to contain my javascript. I don’t like dropping inline code when I don’t have to.

That said, let’s add to preprocess_html().

function mytheme_preprocess_html(&$variables) {
  ...
  // Add our button javascript
  drupal_add_js(drupal_get_path('theme', 'mytheme') . '/assets/js/button.js');
}

And then open or create a new file at the location you specified and add the following

(function ($) {
  $(document).ready(function(){
    // Add button styles to pager elements
    $('.pager-item a, .pager-next a, .pager-last a, .pager-first a, .pager-previous a').button();
  });
}(jQuery));

If you already have a javascript file with document.ready being used globally, you can drop this line of code in there instead of creating a whole new call if you prefer.

So we have the library enabled, a call to include some initialization code and the code itself. Let’s see what we get out of that.

A lot better right? Now a few things to finish this off. By default, there’s some extra padding on .item-list .pager and the font size is a little large. You can tweak them to be a little smaller and tighter together. For example, on one of our client sites, we use a 0px padding on the .item-list .pager element and set the font size to 10px to get this

Keep in mind, since you’re using the jQuery UI buttons, you can also theme/control theme using a ThemeRoller generate style sheet or if you’re already using one, the pager links will follow your styles automatically.

Have fun.