jQuery

【jQuery】シンプルなページネーションプラグインjQuery Pagination

September 11, 2016
jQuery Pagination

jQuery PaginationはシンプルなページネーションjQueryプラグイン。

How To Use

(function( $ ) {
    /*
        <ol id="pagination"></ol>

        All options can be applied to the element via
        attributes, ie data-current-page="10". You can
        use your server-side language to print the
        current page, page count, etc. into an attribute.
    */
    var $pagination = $( '#pagination' ).pagination({
        // these are all the options with their default values
        pageCount: 10, // the total number of pages
        displayCount: 5, // the number of page links to display
        showAll: false, // whether or not to show all page links
        currentPage: 1, // the current page
        linkTemplate: false, // a string template to use for links.
            // '{page}' will be replaced with the current page	
        disabledLinks: false, // whether or not to disable unnecessary links	        
        showFirstLink: true, // whether or not to show the 'first' link
        showPreviousFewLink: true, // whether or not to show the 'previous few' link
        showPreviousLink: true, // whether or not to show the 'previous' link
        showNextLink: true, // whether or not to show the 'next' link
        showNextFewLink: true, // whether or not to show the 'next few' link
        showLastLink: true, // whether or not to show the 'last' link
        onPageChange: function( currentPage, nextPage ) {} // callback function
    });

    // retrieve the api
    var api = $pagination.data( 'pagination' );
    // the api methods
    api.update(); // re-renders the pagination component
    api.setPageCount( int ); // sets a new page count and re-renders
    api.getPageCount(); // gets the current page count
    api.setDisplayCount( int ); // sets a new display count and re-renders
    api.getDisplayCount(); // gets the current display count
    api.showAll( boolean ); // sets the showAll property and re-renders
    api.getShowAll(); // returns the value of the showAll property
    api.setCurrentPage( int ); // sets a new current page and re-renders
    api.getCurrentPage(); // gets the current page
}( jQuery ));