Reuters tutorial: step 3

Table of Contents

• Reuters tutorial
• Step 1: Talk to Solr
• Step 2: Add a results widget
• Step 3: Add a pager widget
• Step 4: Add a tagcloud widget
• Step 5: Display the current filters
• Step 6: Add a free-text widget
• Step 7: Add an autocomplete widget
• Step 8: Add a map widget
• Step 9: Add a calendar widget
• Step 10: Extra credit

AJAX Solr comes with a good jQuery pager widget, based on the will_paginate plugin for Ruby on Rails, so we need only override some of its properties and methods to get the functionality we want.

First, add the JavaScript file for the distributed widget:

<script src="../../lib/widgets/jquery/PagerWidget.js"></script>

Now, add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.PagerWidget({
  id: 'pager',
  target: '#pager',
  prevLabel: '<',
  nextLabel: '>',
  innerWindow: 1,
  renderHeader: function (perPage, offset, total) {
    $('#pager-header').html($('<span></span>').text('displaying ' + Math.min(total, offset + 1) + ' to ' + Math.min(total, offset + perPage) + ' of ' + total));
  }
}));

In addition to the basic id and target properties, PagerWidget exposes some of its own properties. We implement the abstract method renderHeader to display the number of results found.

In this iteration, we showed how to implement a widget by overriding an existing widget’s properties. If we were adding a significant amount of functionality, we should have created a new widget, as we did with the results widget. In this case, we had little code to write, so overriding the pager widget’s properties and implementing its abstract methods during instantiation makes sense.

[What we have so far]

Let’s introduce faceting with a tagcloud widget.