status update on behalf on you in fb | Auto refresh without load page using curl
 


 

jui_pagination (v2.0.0)


Share:

jui_pagination is a jquery plugin, provides pagination using page links or jQuery UI slider. Fully configurable. jQuery UI themes compatible. Localization support..

Compatible with modern web browsers. Tested with: Google Chrome, Mozilla Firefox, Microsoft Internet Explorer >= 8, (default) Android browser.

PROJECT HOME: http://pontikis.net/labs/jui_pagination

DEMO: http://pontikis.net/labs/jui_pagination/demo

DOCUMENTATION: http://pontikis.net/labs/jui_pagination/docs

SUPPORT FORUM: http://pontikis.net/bbs

SOURCE REPOSITORY: https://github.com/pontikis/jui_pagination

JQUERY PLUGIN REGISTRY: http://plugins.jquery.com/jui_pagination/

NuGet GALLERY: https://nuget.org/packages/jui_pagination/

Copyright © Christos Pontikis http://pontikis.net

License MIT

Requires

Tested with jquery >= 1.8.2 and >= jquery-ui 1.8.23

Current Release 2.0.0 (22 Jan 2013) Download here.

CHANGELOG here.

Syntax highlight using http://alexgorbatchev.com/SyntaxHighlighter/

Documentation structure

Available documentation:

Usage

HTML (head section)

    <link rel="stylesheet" type="text/css" href="/path/to/jqueryui_theme/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_pagination.css">
    <!– if custom classes used –>
    <link rel="stylesheet" type="text/css" href="/path/to/custom.css">

    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript" src="/path/to/jquery-ui.js"></script>

    <!– if touch event support for mobile devices is needed –>
    <script type="text/javascript" src="/path/to/jquery.ui.touch-punch.min.js"></script>

    <script type="text/javascript" src="/path/to/jquery.jui_pagination.js"></script>
    <script type="text/javascript" src="/path/to/localization/en.js"></script>
    

JS code

Common

    $("#element_id").jui_pagination({
        totalPages: 103, // REQUIRED
        containerClass: 'some_class' // NOT MANDATORY
        currentPage: 8,
        disableSelectionNavPane: true,

        onChangePage: function(event, page_num) {
            if(isNaN(page_num) || page_num <= 0) {
                alert('Invalid page' + ' (' + page_num + ')');
            } else {
                $("#result").html('Page changed to: ' + page_num);
            }
        }
    });
    

Preview:

Nav pane and slider inside their own divs

    $("#element_id").jui_pagination({
        totalPages: 24, // REQUIRED
        containerClass: 'some_class' // NOT MANDATORY
        currentPage: 7,
        visiblePageLinks: 6,

        navPaneElementID: 'navpane2',
        navPaneClass: 'navpane2 nav-pane ui-widget ui-widget-header ui-corner-all',

        useSlider: true,
        sliderElementID: 'slider2',
        sliderClass: 'slider2',
        sliderOrientation: 'vertical',

        disableSelectionNavPane: true,

        onChangePage: function(event, page_num) {
            if(isNaN(page_num) || page_num <= 0) {
                alert('Invalid page' + ' (' + page_num + ')');
            } else {
                $("#result").html('Page changed to: ' + page_num);
            }
        }
    });
    

Preview:

Options

    $("#element_id").jui_pagination({
        totalPages: 100, // REQUIRED

        containerClass: 'some_class', // NOT MANDATORY

        // DEFAULTS
        currentPage: 1,
        visiblePageLinks: 5,
        maxVisiblePageLinks: 20,
        rowsPerPage: 10,

        nav_pane_display_order: [
            'go_to_page',
            'slider',
            'back_buttons',
            'current_page_label',
            'current_page',
            'nav_items',
            'total_pages_label',
            'total_pages',
            'forward_buttons',
            'rows_per_page',
            'rows_info'
        ],

        useSlider: false,
        sliderInsidePane: true,
        sliderElementID: false, // if given, slider appears outside container inside specified element
        useSliderWithPagesCount: 0, // show slider over specified number of pages
        sliderOrientation: 'horizontal',
        sliderAnimation: 'slow', // true (or 'slow' or 'fast' or duration in milliseconds) or false

        showGoToPage: false,
        showNavButtons: false,
        showLabelCurrentPage: true,
        showCurrentPage: false,
        showNavPages: true,
        navPagesMode: 'first-last-always-visible', // alternative mode is 'continuous'
        showLabelTotalPages: false,
        showTotalPages: false,
        showRowsPerPage: false,
        showRowsInfo: false,
        showPreferences: true,

        navPaneClass: 'nav-pane ui-state-default ui-corner-all',
        navGoToPageClass: 'goto-page ui-state-default ui-corner-all',
        navButtonTopClass: 'nav-button-top ui-icon ui-icon-seek-first',
        navButtonPrevClass: 'nav-button-prev ui-icon ui-icon-seek-prev',
        navCurrentPageLabelClass: 'current-page-label',
        navCurrentPageClass: 'current-page',
        navDotsLeftClass: 'nav-dots-left',
        navPagesClass: 'nav-pages',
        navItemClass: 'nav-item ui-state-default ui-corner-all',
        navItemSelectedClass: 'nav-item ui-state-default ui-corner-all ui-state-highlight',
        navItemHoverClass: 'ui-state-hover', // if empty, no hover applied
        navDotsRightClass: 'nav-dots-right',
        navTotalPagesLabelClass: 'total-pages-label',
        navTotalPagesClass: 'total-pages',
        navButtonNextClass: 'nav-button-next  ui-icon ui-icon-seek-next',
        navButtonLastClass: 'nav-button-last  ui-icon ui-icon-seek-end',
        navRowsPerPageClass: 'rows-per-page  ui-state-default ui-corner-all',
        navInfoClass: 'rows-info',
        sliderClass: 'nav-slider',
        sliderInsidePaneClass: 'nav-slider-inside-pane',
        preferencesClass: 'preferences ui-icon ui-icon-signal',

        nav_pane_id_prefix: 'nav_pane_',
        nav_goto_page_id_prefix: 'goto_page_',
        nav_current_page_label_id_prefix: 'current_page_lbl_',
        nav_current_page_id_prefix: 'current_page_',
        nav_top_id_prefix: 'top_',
        nav_prev_id_prefix: 'prev_',
        nav_dots_left_id_prefix: 'dots_left_',
        nav_pages_id_prefix: 'pages_',
        nav_item_id_prefix: 'page_',
        nav_dots_right_id_prefix: 'dots_right_',
        nav_next_id_prefix: 'next_',
        nav_last_id_prefix: 'last_',
        nav_total_pages_label_id_prefix: 'total_pages_lbl_',
        nav_total_pages_id_prefix: 'total_pages_',
        nav_rows_per_page_id_prefix: 'rows_per_page_',
        nav_rows_info_id_prefix: 'rows_info_',
        slider_id_prefix: 'sld_',
        preferences_id_prefix: 'pref_',
        pref_dialog_id_prefix: 'pref_dlg_',

        disableSelectionNavPane: false, // disable text selection and double click (jquery >= 1.8)

        onChangePage: function() {
        },
        onSetRowsPerPage: function() {
        },
        onDisplay: function() {
        }
    });
    

Methods

COMMON

getDefaults

    $("#element_id").jui_pagination('getDefaults');
    

getOption

    $("#element_id").jui_pagination('getOption', 'option_name');
    

getAllOptions

    $("#element_id").jui_pagination('getAllOptions');
    

setOption

    $("#element_id").jui_pagination('setOption', 'option_name', option_value, reinit);
    

Alternative way to set one or more options

    $("#element_id").jui_pagination({option1_name: option1_value, etc});
    

destroy

    $("#element_id").jui_pagination('destroy');
    
SPECIFIC

setRowsInfo

    $("#element_id").jui_pagination('setRowsInfo', info_html);
    

Events

onChangePage

    $("#element_id").jui_pagination({
        onChangePage: function(event, page_num) {
        // your code here
        }
    });
    

onSetRowsPerPage

    $("#element_id").jui_pagination({
        onSetRowsPerPage: function(event, rows_per_page) {
        // your code here
        }
    });
    

onDisplay

    $("#element_id").jui_pagination({
        onDisplay: function() {
        // your code here
        }
    });