UI/API/1.8/SimplePager

jQuery UI SimplePager

Overview

Make the selected elements SimplePager widgets. The SimplePager was designed to be a simple pagination themeable widget.

The simplicity is given with just the minimal requirements of pagination functionality:

  • First
  • Prev
  • Next
  • Last

In addition to this, the SimplePager also provides the current page with the ability to set it through a text input.

Dependencies

  • UI Core
  • UI Draggable (Optional)

Example

A simple jQuery UI SimplePager.

Navigate to a page:


$('#pager').simplepager({totalRecords: 101, switchPage: function(){});

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="ui.simplepager.js"></script>
    <link rel="stylesheet" href="ui.simplepager.css" type="text/css" /> 
    <script type="text/javascript">
        $(document).ready(function(){
            $('#paging').simplepager({
                perPage: 15,
                totalRecords: 1001,
                draggable: false,
                switchPage: function(event,page){
                    $('#results').html('The page has switched to page: ' + page);            
                }
            });
        });
    </script>
</head>
<body>
    <p id="results" style="color:#fff;" >Navigate to a page:</p>
    <div id="paging"></div>
</body>
</html>

Options

  • autoOpen

    Type:
    Boolean
    Default:
    true

    When autoOpen is true the simplepager will open(display) automatically when simplepager is called. If false it will stay hidden until .simplepager("open") is called on it.

    Code examples

    Initialize a simplepager with the autoOpen option specified.
    $('.selector').simplepager({ autoOpen: false });
    Get or set the autoOpen option, after init.
    //getter
    var autoOpen = $('.selector').simplepager('option', 'autoOpen');
    //setter
    $('.selector').simplepager('option', 'autoOpen', false);
  • startPage

    Type:
    Number
    Default:
    1

    When startPage is set, the simplepager will open(display) with the specified value as the starting page in initialization stage or the reset stage automatically.

    Code examples

    Initialize a simplepager with the startPage option specified.
    $('.selector').simplepager({ startPage: 42 });
    Get or set the startPage option, after init.
    //getter
    var startPage = $('.selector').simplepager('option', 'startPage');
    //setter
    $('.selector').simplepager('option', 'startPage', 1);
  • perPage

    Type:
    Number
    Default:
    25

    When perPage is set, the simplepager will use the value to calculate the total pages for the initialization stage and the reset stage.

    Code examples

    Initialize a simplepager with the perPage option specified.
    $('.selector').simplepager({ perPage: 15 });
    Get or set the perPage option, after init.
    //getter
    var perPage = $('.selector').simplepager('option', 'perPage');
    //setter
    $('.selector').simplepager('option', 'perPage', 25);
  • totalRecords

    Type:
    Number
    Default:
    0

    When totalRecords is set, the simplepager will use the value to calculate the total pages for the initialization stage and the reset stage.

    If this is left to the default of 0 on initialization, the simplepager will not display until it is set.

    Code examples

    Initialize a simplepager with the totalRecords option specified.
    $('.selector').simplepager({ totalRecords: 101 });
    Get or set the totalRecords option, after init.
    //getter
    var totalRecords = $('.selector').simplepager('option', 'totalRecords');
    //setter
    $('.selector').simplepager('option', 'totalRecords', 88);
  • draggable

    Type:
    Boolean
    Default:
    true

    If set to true, the simplepager will be draggable.

    Code examples

    Initialize a simplepager with the draggable option specified.
    $('.selector').simplepager({ draggable: false });
    Get or set the draggable option, after init.
    //getter
    var draggable = $('.selector').simplepager('option', 'draggable');
    //setter
    $('.selector').simplepager('option', 'draggable', false);
  • dragOpts

    Type:
    Object
    Default:
                                    {
                                        handle: $(this.element).attr('id'),
                                        iframeFix: true,
                                        stop: function(){ $(this.element).find('.ui-pager-current').focus(); }
                                    }
                                    

    When dragOpts is set, the simplepager will extend the default draggable option values with the given ones.

    Code examples

    Initialize a simplepager with the dragOpts option specified.
    $('.selector').simplepager({ dragOpts: { connectToSortable: 'ul#myList' } });
    Get or set the dragOpts option, after init.
    //getter
    var dragOpts = $('.selector').simplepager('option', 'dragOpts');
    //setter
    $('.selector').simplepager('option', 'dragOpts', { connectToSortable: 'ul#myList' });

Events

  • switchPage

    Type:
    simplepagerswitchPage

    This event is triggered when the page has changed.

    Code examples

    Supply a callback function to handle the switchPage event as an init option.
    $('.selector').simplepager({
       switchPage: function(event, page) { ... }
    });
    Bind to the switchPage event by type: simplepagerswitchPage.
    $('.selector').bind('simplepagerswitchPage', function(event, page) {
      ...
    });

Methods

  • close

    Signature:
    .simplepager( 'close')

    Close(hide) the simplepager.

  • open

    Signature:
    .simplepager( 'open')

    Open(display) the simplepager.

  • current

    Signature:
    .simplepager( 'current')

    Get and/or set the current page for the simplepager.

Theming

The jQuery UI SimplePage plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div id="paging" class="ui-pager ui-widget ui-widget-header ui-helper-clearfix ui-corner-all ui-draggable" style="display: block;">
    <div class="ui-pager-first ui-corner-all">
        <span class="ui-corner-all ui-icon ui-icon-seek-first" title="First">First</span>
    </div>
    <div class="ui-pager-content ui-widget-content ui-state-default ui-corner-all">
        <div class="ui-pager-before">
            <span class="ui-icon ui-icon-seek-prev" title="Prev">Prev</span>
        </div>
        <input class="ui-pager-current" size="2"/>
        <div class="ui-pager-after">
            <span class="ui-icon ui-icon-seek-next" title="Next">Next</span>
        </div>
    </div>
    <div class="ui-pager-last ui-corner-all">
        <span class="ui-corner-all ui-icon ui-icon-seek-end" title="Last">End</span>
    </div>
</div>

Note: This is a sample of markup generated by the simplepager plugin, not markup you should use to create a simplepager. The only markup needed for that is <div></div>.