Pagination

Requirements

• an Indextank_[Ize]'d FORM.
• an Indextank_[AjaxSearch]'d INPUT to listen to.
• import jquery.indextank.pagination.js

How it works

Pagination binds to an element to display pagination controls for the results of an AjaxSearch. When Pagination hears an Indextank.AjaxSearch.success event, it zeroes the HTML of its bound element and renders numbers, to pick the results page you want to see.

Pagination will do its best to leave the selected page in the middle of the control. In some cases that is not possible (ie. you selected the last possible page for a given result set).

Usage

A basic example that uses the default format function to display your results:

var p = $("#pagination").indextank_Pagination();
$("#query").indextank_AjaxSearch({listeners: p});

The formatPage function takes 2 parameters: the page number and a boolean indicating whether it is selected or not. It should return a <li/> element .

// return an image for each number .. and use CSS sprites based on the selected status.
var customFormatPage = function(number, selected){
    var li = $("<li/>").addClass("pager")
        .append( $("<img/>").attr("src", number + ".jpg") );
    if (selected) {
      li.addClass("selected");
    }
}

var p = $("#pagination").indextank_Pagination({formatPage: customFormatPage});
$("#query").indextank_AjaxSearch({listeners: p});

Options

• formatPage: a function that takes a page number and a boolean and should return a <li/>. The default formatPage returns a <li/>, with number as text. It'll have a 'selected' CSS class if the boolean is true
• maxPages: a number indicating the maximum number of elements to display on the pagination control. It is NOT the maximum page number. 24 25 26 is a valid example for maxPages = 3

Events

• Reacts to

  • Indextank.AjaxSearch.success: renders the pagination control, if there is more than 1 showable page.

• Triggers

  • Indextank.AjaxSearch.runQuery: clones the last query, changes the start parameter and re-runs it.