Pagination.js

https://github.com/superraytin/paginationjs
Admin
A jQuery plugin that provides simple yet fully customizable pagination functionality for managing...
Tokens:13,672
Snippets:99
Trust Score:8.8
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Handlebars Templating Setup

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Example of setting up a Handlebars template in HTML and using it within the Pagination.js callback to render data.

```html
<script type="text/template" id="template-demo">
    <ul>
    {{#each data}}
        <li>{{this}}</li>
    {{/each}}
    </ul>
</script>
```

--------------------------------

### Underscore Templating Setup

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Example of setting up an Underscore template in HTML and using it within the Pagination.js callback to render data.

```html
<script type="text/template" id="template-demo">
    <ul>
    <% for (var i = 0, len = data.length; i < len; i++) { %>
        <li><%= data[i] %></li>
    <% } %>
    </ul>
</script>
```

--------------------------------

### Configure Initialization Triggers

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Example of setting initial page number and trigger behavior during initialization.

```javascript
triggerPagingOnInit: true，
pageNum: 2
```

--------------------------------

### Format Go Button Example

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Customize the 'Go' button using template variables. This example uses the default format, which displays the button.

```javascript
formatGoButton: "<%= button %>"
```

--------------------------------

### Complete Example with Handlebars Templating

Source: https://context7.com/superraytin/paginationjs/llms.txt

A full implementation demonstrating Pagination.js with Handlebars templating for rendering data. This example includes various configuration options and event callbacks.

```html
<script id="item-template" type="text/x-handlebars-template">
    <ul class="item-list">
    {{#each items}}
        <li class="item">
            <span class="item-id">#{{id}}</span>
            <span class="item-name">{{name}}</span>
            <span class="item-price">${{price}}</span>
        </li>
    {{/each}}
    </ul>
</script>

<div id="data-container"></div>
<div id="pagination-container"></div>

<script>
$(function() {
    var template = Handlebars.compile($('#item-template').html());

    var products = [];
    for (var i = 1; i <= 100; i++) {
        products.push({
            id: i,
            name: 'Product ' + i,
            price: (Math.random() * 100).toFixed(2)
        });
    }

    $('#pagination-container').pagination({
        dataSource: products,
        pageSize: 10,
        pageRange: 2,
        showNavigator: true,
        showSizeChanger: true,
        showGoInput: true,
        showGoButton: true,
        formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> products',
        className: 'paginationjs-theme-blue',

        beforePaging: function(pageNumber) {
            $('#data-container').addClass('loading');
        },

        callback: function(data, pagination) {
            var html = template({ items: data });
            $('#data-container').html(html).removeClass('loading');
        },

        afterIsLastPage: function() {
            console.log('You have reached the last page');
        }
    });
});
</script>
```

--------------------------------

### Format Go Input Example

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Customize the 'Go' input field using template variables. This example uses the default format, which displays the input value.

```javascript
formatGoInput: "<%= input %>"
```

--------------------------------

### Format Navigator Function Example

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Customize the navigator text using a function. This example formats the output to show the current page out of the total number of pages.

```javascript
formatNavigator: function(currentPage, totalPage, totalNumber) {
  return currentPage + " / " + totalPage;
}
```

--------------------------------

### Format Navigator String Example

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Customize the navigator text using template variables. This example shows how to display the current range of items and the total number of items.

```javascript
formatNavigator: "<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items"
```

--------------------------------

### Register Pagination Events

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Examples of using callback functions and plugin hooks for event handling.

```javascript
var container = $('#example1');
container.pagination({
	afterRender: function(){
		// function body
	}
});
```

```javascript
var container = $('#example2');

container.pagination({
	dataSource: [1, 2, 3],
	pageSize: 1
});

container.addHook('afterRender', function(){
	// function body
});
```

--------------------------------

### Registering Events as Plugin Hooks

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Register event hooks using the addHook method for more flexibility, allowing hooks to be added before initialization. This is useful for complex setups.

```javascript
var container = $("#example2");

container.pagination({
	dataSource: [1, 2, 3],
	pageSize: 1
});

container.addHook('afterRender', function(){
	// function body
});
```

--------------------------------

### Execute Instance Methods

Source: https://context7.com/superraytin/paginationjs/llms.txt

Control pagination state and navigation programmatically after initialization.

```javascript
var container = $('#pagination-container');

// Initialize pagination
container.pagination({
    dataSource: Array.from({length: 100}, (_, i) => i + 1),
    pageSize: 10,
    callback: function(data, pagination) {
        console.log('Page:', pagination.pageNumber, 'Data:', data);
    }
});

// Navigate to specific page
container.pagination('go', 5);
// Or shorthand:
container.pagination(5);

// Navigate with custom callback
container.pagination('go', 3, function(data, pagination) {
    console.log('Custom render for page 3:', data);
});

// Previous/Next page
container.pagination('previous');
container.pagination('next');

// Get current state
var currentPage = container.pagination('getCurrentPageNum');
var totalPages = container.pagination('getTotalPage');
var pageData = container.pagination('getCurrentPageData');
var isDisabled = container.pagination('isDisabled');

console.log('Current:', currentPage, 'Total:', totalPages, 'Disabled:', isDisabled);

// Control visibility and state
container.pagination('disable');
container.pagination('enable');
container.pagination('hide');
container.pagination('show');
container.pagination('destroy');
```

--------------------------------

### Initialize Basic Pagination

Source: https://context7.com/superraytin/paginationjs/llms.txt

Sets up pagination using a static array as the data source and a callback function to render the page content.

```javascript
$('#pagination-container').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    pageSize: 5,
    callback: function(data, pagination) {
        var html = '<ul>';
        $.each(data, function(index, item) {
            html += '<li>' + item + '</li>';
        });
        html += '</ul>';
        $('#data-container').html(html);
    }
});
```

--------------------------------

### PaginationJS Configuration Options

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Configuration options for initializing the PaginationJS component.

```APIDOC
## Configuration Options

### dataSource (array | string | object | function)
- **Description**: Provides data items. Can be an Array, an Object (with locator), a Function (using done callback), or a URL string for remote Ajax requests.

### locator (string | function)
- **Description**: Used when the data source is not an array to indicate the position of the array within the data source. Supports dot notation (e.g., 'a.b').

### totalNumber (number)
- **Description**: Specifies the total number of data items when using a URL as a dataSource.

### totalNumberLocator (function)
- **Description**: A function that extracts the total number of items from the Ajax response.

### pageNumber (number)
- **Description**: The default page number at initialization (default: 1).

### pageSize (number)
- **Description**: Number of data items per page (default: 10).

### pageRange (number)
- **Description**: Defines the range of pages to display around the current page.

### callback (function)
- **Description**: Invoked on each paging to customize innerHTML. Receives `data` (array) and `pagination` (object).

### alias (object)
- **Description**: Customizes the query parameter names for `pageNumber` and `pageSize` in remote Ajax requests.
```

--------------------------------

### Pagination with Simple Templating

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Demonstrates how to use the `simpleTemplating` function within the Pagination.js callback to render data as a list.

```javascript
$('#pagination-container').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        var html = simpleTemplating(data);
        $('#data-container').html(html);
    }
})
```

--------------------------------

### Basic Pagination Initialization

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Initialize Pagination.js with a data source and a callback function to render the data. The callback receives the current page's data and pagination information.

```html
<div id="data-container"></div>
<div id="pagination-container"></div>
```

```javascript
$('#pagination-container').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        // template method of yourself
        var html = template(data);
        $('#data-container').html(html);
    }
})
```

--------------------------------

### Methods

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Methods to control pagination behavior after initialization.

```APIDOC
## Methods

### previous
- **Description**: Triggers the previous page.

### next
- **Description**: Triggers the next page.

### go
- **Description**: Jumps to a specified page.
- **Usage**: `container.pagination('go', pageNumber)` or `container.pagination(pageNumber)`.
- **With Callback**: `container.pagination('go', pageNumber, function(data, pagination){ ... })`.

### disable
- **Description**: Disables the pagination component. Use `enable()` to re-enable.

### enable
- **Description**: Enables the pagination component.

### show
- **Description**: Shows the pagination component.

### hide
- **Description**: Hides the pagination component.

### destroy
- **Description**: Destroys the pagination instance.

### getCurrentPageNum
- **Type**: `number`
- **Description**: Gets the current page number.

### getTotalPage
- **Type**: `number`
- **Description**: Gets the total number of pages.

### getCurrentPageData
- **Type**: `array`
- **Description**: Gets the data for the current page.
```

--------------------------------

### Initialize and Control Pagination

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Basic initialization and triggering the previous page action.

```javascript
var container = $('#example1');
container.pagination({ ... });

container.pagination('previous');
```

--------------------------------

### Initialize Pagination with Function Data Source

Source: https://context7.com/superraytin/paginationjs/llms.txt

Uses a function to dynamically generate or fetch data before pagination occurs.

```javascript
$('#pagination-container').pagination({
    dataSource: function(done) {
        // Generate data dynamically
        var result = [];
        for (var i = 1; i <= 195; i++) {
            result.push('Item ' + i);
        }
        done(result);
    },
    pageSize: 10,
    callback: function(data, pagination) {
        console.log('Current page:', pagination.pageNumber);
        console.log('Items on page:', data);
        // Render data...
    }
});
```

```javascript
$('#pagination-container').pagination({
    dataSource: function(done) {
        $.ajax({
            type: 'GET',
            url: '/api/items',
            success: function(response) {
                done(response.data);
            }
        });
    },
    callback: function(data, pagination) {
        // Render fetched data
    }
});
```

--------------------------------

### Basic Pagination with Local Data

Source: https://github.com/superraytin/paginationjs/blob/master/examples/pagination.html

Initializes pagination with a local array of data. The callback function renders the data into a list.

```javascript
$(function() { (function(name) { var container = $('#pagination-' + name); if (!container.length) return; var sources = function () { var result = []; for (var i = 1; i < 196; i++) { result.push(i); } return result; }(); var options = { dataSource: sources, callback: function (response, pagination) { window.console && console.log(response, pagination); var dataHtml = '<ul>'; $.each(response, function (index, item) { dataHtml += '<li>' + item + '</li>'; }); dataHtml += '</ul>'; container.prev().html(dataHtml); } }; //$.pagination(container, options); container.addHook('beforeInit', function () { window.console && console.log('beforeInit...'); }); container.pagination(options); container.addHook('beforePageOnClick', function () { window.console && console.log('beforePageOnClick...'); //return false }); })('demo1');
```

--------------------------------

### Array Data Source for Pagination.js

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Provide data items directly as a JavaScript array. This is the simplest way to initialize pagination.

```javascript
['1', '2', '3', '4']
```

--------------------------------

### Applying Small Blue Theme

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Combine 'paginationjs-theme-blue' and 'paginationjs-small' classes for a small-sized blue theme.

```html
className: 'paginationjs-theme-blue paginationjs-small'
```

--------------------------------

### Initialize Pagination

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Initialize the pagination component on a container element. Accepts an options object for configuration.

```javascript
var container = $('#example1');
container.pagination({ ... });
```

--------------------------------

### Configuration Options

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Options for customizing the appearance and behavior of the pagination component.

```APIDOC
## Configuration Options

### formatNavigator
- **Type**: `string | function(currentPage, totalPage, totalNumber)`
- **Default**: `<%= currentPage %> / <%= totalPage %>`
- **Description**: Navigator formatting template. Can be a string with template variables or a custom function.
- **Template Variables**: `currentPage`, `totalPage`, `totalNumber`, `rangeStart`, `rangeEnd`.

### formatGoInput
- **Type**: `string | function(input, currentPage, totalPage, totalNumber)`
- **Default**: `<%= input %>`
- **Description**: Go input box formatting template. Can be a string or a custom function.
- **Template Variables**: `input`, `currentPage`, `totalPage`, `totalNumber`.

### formatGoButton
- **Type**: `string | function(button, currentPage, totalPage, totalNumber)`
- **Default**: `<%= button %>`
- **Description**: Go button formatting template. Can be a string or a custom function.
- **Template Variables**: `button`, `currentPage`, `totalPage`, `totalNumber`.

### header
- **Type**: `string | function(currentPage, totalPage, totalNumber)`
- **Default**: `''`
- **Description**: Custom header content.
- **Template Variables**: `currentPage`, `totalPage`, `totalNumber`.

### footer
- **Type**: `string | function(currentPage, totalPage, totalNumber)`
- **Default**: `''`
- **Description**: Custom footer content.
- **Template Variables**: `currentPage`, `totalPage`, `totalNumber`.

### pageLink
- **Type**: `string`
- **Default**: `''`
- **Description**: Pagination link.

### triggerPagingOnInit
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Whether to trigger pagination on initialization.

### resetPageNumberOnInit
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Whether to reset page number to 1 on initialization when dataSource is a URL.

### hideOnlyOnePage
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Whether to hide pagination when there is only one page.

### onError
- **Type**: `function(errorThrown, errorType)`
- **Description**: Callback function executed when an error occurs during pagination rendering.
- **Error Types**: `ajaxSuccessHandlerError`
```

--------------------------------

### Pagination Theming

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Information on how to apply and customize themes for the pagination component.

```APIDOC
# Theme

Pagination comes with 5 sets of default themes, but you can fully customize your own theme.

First, you should link the css file in the header tag of HTML: 

    <link rel="stylesheet" href="{yourAssetsServer}/pagination.css" />

css & less file: [pagination.css](../dist/2.6.0/pagination.css) [pagination.less](../dist/2.6.0/pagination.less)

For example, the blue theme:

```
className: 'paginationjs-theme-blue'
```

small & blue:

```
className: 'paginationjs-theme-blue paginationjs-small'
```

big & blue:

```
className: 'paginationjs-theme-blue paginationjs-big'
```

If you want to fully customize the style, you can add `custom-paginationjs` to the `className` option.
```

--------------------------------

### Pagination Configuration Options

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Configuration options for customizing the pagination component, including headers, footers, and Ajax settings.

```APIDOC
## Configuration Options

### header
- **Type**: string | function(currentPage, totalPage, totalNumber)
- **Description**: Prepend extra contents to the pagination buttons.

### footer
- **Type**: string | function(currentPage, totalPage, totalNumber)
- **Description**: Append extra contents to the pagination buttons.

### ajax
- **Type**: object | function
- **Description**: Configuration for the built-in Ajax function, compatible with $.ajax.
- **Parameters**:
  - **type** (string) - Request type (GET, POST, etc.)
  - **dataType** (string) - Data type (xml, json, jsonp)
  - **data** (object) - Additional data to send
  - **cache** (boolean) - Enable/disable browser caching
  - **async** (boolean) - Asynchronous request flag
  - **beforeSend** (function) - Pre-request callback
  - **pageNumberStartWithZero** (boolean) - Zero-based page indexing
```

--------------------------------

### Go to Next Page

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Navigate to the next page using the 'next' method.

```javascript
container.pagination('next');
```

--------------------------------

### Pagination Display Configuration

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Settings to toggle the visibility of various pagination elements like buttons, inputs, and size changers.

```APIDOC
## Pagination Display Configuration

### Parameters
#### Request Body
- **showPrevious** (boolean) - Optional - Display the previous button. Default: true
- **showNext** (boolean) - Optional - Display the next button. Default: true
- **showPageNumbers** (boolean) - Optional - Display page number buttons. Default: true
- **showSizeChanger** (boolean) - Optional - Display size changer. Default: false
- **sizeChangerOptions** (array) - Optional - Specifies options for the size selector. Default: [10, 20, 50, 100]
- **showNavigator** (boolean) - Optional - Display the navigator. Default: false
- **showGoInput** (boolean) - Optional - Display the 'Go' input box. Default: false
- **showGoButton** (boolean) - Optional - Display the 'Go' button. Default: false
- **hideFirstOnEllipsisShow** (boolean) - Optional - Hide the first page number button when ellipsis showed. Default: false
- **hideLastOnEllipsisShow** (boolean) - Optional - Hide the last page number when ellipsis showed. Default: false
- **autoHidePrevious** (boolean) - Optional - Hide the previous button when current page is first. Default: false
- **autoHideNext** (boolean) - Optional - Hide the next button when current page is last. Default: false
```

--------------------------------

### Ajax Configuration

Source: https://context7.com/superraytin/paginationjs/llms.txt

Customize Ajax request settings for server-side data fetching.

```APIDOC
## Ajax Configuration

Customize Ajax request settings for server-side data fetching.

```javascript
$('#pagination-container').pagination({
    dataSource: '/api/items',
    totalNumber: 500,
    pageSize: 20,
    ajax: {
        type: 'POST',
        dataType: 'json',
        cache: false,
        async: true,
        data: {
            category: 'electronics',
            sortBy: 'price'
        },
        beforeSend: function(jqXHR) {
            $('#loading').show();
            jqXHR.setRequestHeader('Authorization', 'Bearer token123');
        },
        pageNumberStartWithZero: true  // Send pageNumber=0 for first page
    },
    formatAjaxError: function(jqXHR, textStatus, errorThrown) {
        console.error('Ajax error:', textStatus, errorThrown);
        $('#data-container').html('Failed to load data. Please try again.');
    },
    callback: function(data, pagination) {
        $('#loading').hide();
        // Render data...
    }
});

// Custom Ajax function replacement
$('#pagination-container').pagination({
    dataSource: '/api/items',
    totalNumberLocator: function(response) { return response.total; },
    ajaxFunction: function(settings) {
        // Use fetch API instead of $.ajax
        fetch(settings.url + '?' + $.param(settings.data))
            .then(response => response.json())
            .then(data => settings.success(data))
            .catch(error => settings.error(null, 'error', error));
    },
    callback: function(data) { /* ... */ }
});
```
```

--------------------------------

### Static Method Initialization

Source: https://context7.com/superraytin/paginationjs/llms.txt

Initialize pagination using the static method `$.pagination()` as an alternative to the jQuery plugin syntax. This method accepts a selector or jQuery object and an options object.

```javascript
// Using static method
var container = $.pagination('#pagination-container', {
    dataSource: Array.from({length: 100}, (_, i) => 'Item ' + (i + 1)),
    pageSize: 10,
    callback: function(data, pagination) {
        var html = data.join('<br>');
        $(this).prev('.data-container').html(html);
    }
});

// Can also pass jQuery object
var $el = $('#pagination-container');
$.pagination($el, {
    dataSource: [1, 2, 3, 4, 5],
    pageSize: 2,
    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Pagination Text and Formatting

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Settings to customize labels and formatting templates for navigation elements.

```APIDOC
## Pagination Text and Formatting

### Parameters
#### Request Body
- **prevText** (string) - Optional - Custom label for the Previous button. Default: &laquo;
- **nextText** (string) - Optional - Custom label for the Next button. Default: &raquo;
- **ellipsisText** (string) - Optional - Custom label for the ellipsis button. Default: ...
- **goButtonText** (string) - Optional - Custom label for the Go button. Default: Go
- **formatNavigator** (string|function) - Optional - Formats the navigator. Default: <%= currentPage %> / <%= totalPage %>
- **formatGoInput** (string|function) - Optional - Formats the Go input. Default: <%= input %>
- **formatGoButton** (string|function) - Optional - Formats the Go button. Default: <%= button %>
```

--------------------------------

### Pagination Methods

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Methods available to control the pagination component after initialization.

```APIDOC
## Pagination Methods

### previous
- **Description**: Go to the previous page.

### next
- **Description**: Go to the next page.

### go
- **Description**: Go to a specific page.
- **Parameters**:
  - **pageNumber** (number) - The target page number.
  - **callback** (function) - Optional callback to customize item rendering for the target page.
```

--------------------------------

### Configuring Global Defaults

Source: https://context7.com/superraytin/paginationjs/llms.txt

Set default options for all subsequent pagination instances by extending `$.fn.pagination.defaults`. Individual instance options will override these global defaults.

```javascript
// Set global defaults
$.extend($.fn.pagination.defaults, {
    pageSize: 20,
    pageRange: 3,
    showNavigator: true,
    showGoInput: true,
    showGoButton: true,
    prevText: 'Prev',
    nextText: 'Next',
    goButtonText: 'Go',
    formatNavigator: 'Total <%= totalNumber %> items',
    className: 'paginationjs-theme-blue'
});

// All subsequent instances inherit these defaults
$('#pagination1').pagination({
    dataSource: data1,
    callback: function(data) { /* ... */ }
});

$('#pagination2').pagination({
    dataSource: data2,
    pageSize: 50,  // Override default for this instance
    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Go to Previous Page

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Navigate to the previous page using the 'previous' method.

```javascript
container.pagination('previous');
```

--------------------------------

### Advanced Pagination with Local Data and Options

Source: https://github.com/superraytin/paginationjs/blob/master/examples/pagination.html

Configures pagination with local data and enables advanced features like page size changer, go to input, and custom navigator formatting.

```javascript
(function(name) { var container = $('#pagination-' + name); if (!container.length) return; var sources = function () { var result = []; for (var i = 1; i < 196; i++) { result.push(i); } return result; }(); var options = { dataSource: sources, pageSize: 10, showGoInput: true, showGoButton: true, showNavigator: true, showSizeChanger: true, formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items', callback: function (response, pagination) { window.console && console.log(response, pagination); var dataHtml = '<ul>'; $.each(response, function (index, item) { dataHtml += '<li>' + item + '</li>'; }); dataHtml += '</ul>'; container.prev().html(dataHtml); } }; //$.pagination(container, options); container.addHook('beforeInit', function () { window.console && console.log('beforeInit...'); }); container.pagination(options); container.addHook('beforePageOnClick', function () { window.console && console.log('beforePageOnClick...'); //return false }); })('demo2');
```

--------------------------------

### Apply CSS Classes and Themes

Source: https://context7.com/superraytin/paginationjs/llms.txt

Style the component using built-in themes or custom CSS class prefixes.

```javascript
// Using built-in themes
$('#pagination-container').pagination({
    dataSource: Array.from({length: 50}, (_, i) => i + 1),
    className: 'paginationjs-theme-blue paginationjs-small',
    callback: function(data) { /* ... */ }
});

// Available themes: default, blue, green, yellow, red
// Sizes: paginationjs-small, paginationjs-big

// Custom CSS classes
$('#pagination-container').pagination({
    dataSource: Array.from({length: 50}, (_, i) => i + 1),
    classPrefix: 'my-pagination',
    className: 'custom-pagination',
    activeClassName: 'current',
    disableClassName: 'inactive',
    ulClassName: 'page-list',
    pageClassName: 'page-item',
    prevClassName: 'prev-btn',
    nextClassName: 'next-btn',
    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Configure Pagination Display Controls

Source: https://context7.com/superraytin/paginationjs/llms.txt

Toggle visibility of navigation elements and configure size changer options.

```javascript
$('#pagination-container').pagination({
    dataSource: Array.from({length: 195}, (_, i) => i + 1),
    pageSize: 10,
    showPrevious: true,
    showNext: true,
    showPageNumbers: true,
    showNavigator: true,
    showGoInput: true,
    showGoButton: true,
    showSizeChanger: true,
    sizeChangerOptions: [10, 20, 50, 100],
    autoHidePrevious: true,  // Hide prev button on first page
    autoHideNext: true,       // Hide next button on last page
    hideOnlyOnePage: true,    // Hide pagination if only one page
    formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items',
    callback: function(data, pagination) {
        // Displays: "1-10 of 195 items" with all controls
    }
});
```

--------------------------------

### Applying Blue Theme

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Apply the 'paginationjs-theme-blue' class to use the blue theme for the pagination component.

```html
className: 'paginationjs-theme-blue'
```

--------------------------------

### Applying Big Blue Theme

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Combine 'paginationjs-theme-blue' and 'paginationjs-big' classes for a large-sized blue theme.

```html
className: 'paginationjs-theme-blue paginationjs-big'
```

--------------------------------

### Registering Events as Callbacks

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Use this method to register event callbacks directly within the pagination initialization options. Ensure the target container is correctly selected.

```javascript
var container = $("#example1");
container.pagination({
	afterRender: function(){
		// function body
	}
});
```

--------------------------------

### Pagination Styling Configuration

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Settings to customize the CSS classes applied to pagination elements.

```APIDOC
## Pagination Styling Configuration

### Parameters
#### Request Body
- **classPrefix** (string) - Optional - Prefixes class name of pagination elements. Default: paginationjs
- **className** (string) - Optional - Additional css class(es) for the root pagination element.
- **activeClassName** (string) - Optional - CSS class(es) for the active button. Default: active
- **disableClassName** (string) - Optional - CSS class(es) for the disabled buttons. Default: disabled
- **ulClassName** (string) - Optional - CSS class(es) for the inner ul element.
- **pageClassName** (string) - Optional - CSS class(es) for the page buttons.
- **prevClassName** (string) - Optional - CSS class(es) for the Previous button.
- **nextClassName** (string) - Optional - CSS class(es) for the Next button.
```

--------------------------------

### Configure Ajax Requests and Custom Fetching

Source: https://context7.com/superraytin/paginationjs/llms.txt

Customize server-side data fetching via the ajax configuration object or replace the default Ajax behavior entirely using ajaxFunction.

```javascript
$('#pagination-container').pagination({
    dataSource: '/api/items',
    totalNumber: 500,
    pageSize: 20,
    ajax: {
        type: 'POST',
        dataType: 'json',
        cache: false,
        async: true,
        data: {
            category: 'electronics',
            sortBy: 'price'
        },
        beforeSend: function(jqXHR) {
            $('#loading').show();
            jqXHR.setRequestHeader('Authorization', 'Bearer token123');
        },
        pageNumberStartWithZero: true  // Send pageNumber=0 for first page
    },
    formatAjaxError: function(jqXHR, textStatus, errorThrown) {
        console.error('Ajax error:', textStatus, errorThrown);
        $('#data-container').html('Failed to load data. Please try again.');
    },
    callback: function(data, pagination) {
        $('#loading').hide();
        // Render data...
    }
});

// Custom Ajax function replacement
$('#pagination-container').pagination({
    dataSource: '/api/items',
    totalNumberLocator: function(response) { return response.total; },
    ajaxFunction: function(settings) {
        // Use fetch API instead of $.ajax
        fetch(settings.url + '?' + $.param(settings.data))
            .then(response => response.json())
            .then(data => settings.success(data))
            .catch(error => settings.error(null, 'error', error));
    },
    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Navigate to Specific Page

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Methods for jumping to a specific page, including optional custom callback functions.

```javascript
container.pagination('go', 8)
container.pagination(8)
```

```javascript
container.pagination('go', 8, function(data, pagination){
    // template method of yourself
})
```

--------------------------------

### Utilities

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Utility functions for data formatting and AJAX handling.

```APIDOC
## Utilities

### formatResult
- **Type**: `function(data)`
- **Description**: Custom function to process data for each page before the `callback` is triggered. Can return processed data or modify the `data` array in place.

### formatAjaxError
- **Type**: `function(jqXHR, textStatus, errorThrown)`
- **Description**: Custom function to render error messages for AJAX requests.

### ajax
- **Type**: `object | function`
- **Description**: Configuration for custom AJAX requests. Parameters are compatible with jQuery's `$.ajax`.
- **Parameters**: `type`, `dataType`, `data`, `cache`, `async`, `beforeSend`, `pageNumberStartWithZero`.

### ajaxFunction
- **Type**: `function(settings)`
- **Description**: Custom AJAX function to replace the default `$.ajax`. Must call `settings.success` or `settings.error`.
```

--------------------------------

### Events

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Event handling for pagination lifecycle.

```APIDOC
## Events

Pagination events can be handled using callback functions during initialization or via plugin hooks.

### Callback Function Example:
```javascript
var container = $('#example1');
container.pagination({
    afterRender: function(){
        // function body
    }
});
```

### Plugin Hook Example:
```javascript
var container = $('#example2');
container.addHook('afterRender', function(){
    // function body
});
```

**Note**: Hooks can be defined before or after pagination initialization.
```

--------------------------------

### Event Callbacks

Source: https://context7.com/superraytin/paginationjs/llms.txt

Register lifecycle event callbacks during initialization for fine-grained control over the pagination's behavior.

```APIDOC
## Event Callbacks

Register lifecycle event callbacks during initialization for fine-grained control.

```javascript
$('#pagination-container').pagination({
    dataSource: Array.from({length: 50}, (_, i) => i + 1),
    pageSize: 5,

    // Initialization events
    beforeInit: function() {
        console.log('Pagination initializing...');
        // return false; // Stops initialization
    },
    afterInit: function(el) {
        console.log('Pagination initialized:', el);
    },

    // Rendering events
    beforeRender: function(isForced) {
        console.log('About to render, forced:', isForced);
    },
    afterRender: function(isForced) {
        console.log('Rendered, forced:', isForced);
    },

    // Paging events
    beforePaging: function(pageNumber) {
        console.log('Going to page:', pageNumber);
        // return false; // Cancels paging
    },
    afterPaging: function(pageNumber) {
        console.log('Now on page:', pageNumber);
    },

    // Click events
    beforePageOnClick: function(event, pageNumber) {
        console.log('Page button clicked:', pageNumber);
    },
    beforePreviousOnClick: function(event, pageNumber) {
        console.log('Previous clicked, going to:', pageNumber);
    },
    beforeNextOnClick: function(event, pageNumber) {
        console.log('Next clicked, going to:', pageNumber);
    },

    // Boundary events
    afterIsFirstPage: function() {
        console.log('Reached first page');
    },
    afterIsLastPage: function() {
        console.log('Reached last page');
    },

    callback: function(data) { /* ... */ }
});
```
```

--------------------------------

### Customize Text and Templates

Source: https://context7.com/superraytin/paginationjs/llms.txt

Override default labels and provide custom HTML templates for navigation components.

```javascript
$('#pagination-container').pagination({
    dataSource: Array.from({length: 100}, (_, i) => i + 1),
    pageSize: 10,
    pageRange: 2,
    prevText: '&larr; Previous',
    nextText: 'Next &rarr;',
    ellipsisText: '...',
    goButtonText: 'Jump',
    showNavigator: true,
    showGoInput: true,
    showGoButton: true,
    formatNavigator: function(currentPage, totalPage, totalNumber) {
        return 'Page ' + currentPage + ' of ' + totalPage + ' (' + totalNumber + ' total items)';
    },
    formatGoInput: 'Go to page <%= input %>',
    formatGoButton: '<%= button %>',
    header: '<div class="custom-header">Select a page:</div>',
    footer: function(currentPage, totalPage) {
        return '<div class="custom-footer">Page ' + currentPage + '/' + totalPage + '</div>';
    },
    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Configuring Defaults

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

You can modify the default configuration options for all Pagination.js instances by extending the `$.fn.pagination.defaults` object.

```APIDOC
## Configuring Defaults

Modify the default configuration for all pagination instances by extending the `$.fn.pagination.defaults` object.

**Example:** Set the default page size to 20.

```javascript
$.extend($.fn.pagination.defaults, {
    pageSize: 20
});
```

After this modification, all newly created pagination instances will have a page size of 20 by default.
```

--------------------------------

### Configure Server-side Pagination with URL

Source: https://context7.com/superraytin/paginationjs/llms.txt

Fetches data from a remote API endpoint for each page request, using a locator to identify the data array in the response.

```javascript
$('#pagination-container').pagination({
    dataSource: 'https://api.example.com/items',
    locator: 'data',  // Path to array in response: { data: [...] }
    totalNumber: 500,
    pageSize: 20,
    ajax: {
        type: 'GET',
        dataType: 'json',
        beforeSend: function() {
            $('#data-container').html('Loading...');
        }
    },
    callback: function(data, pagination) {
        // pagination.originalResponse contains full server response
        var html = '<ul>';
        $.each(data, function(index, item) {
            html += '<li>' + item.name + '</li>';
        });
        html += '</ul>';
        $('#data-container').html(html);
    }
});
```

--------------------------------

### Apply PaginationJS Themes

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Include the required CSS file in the document header and apply theme classes to the pagination component.

```html
<link rel="stylesheet" href="{yourAssetsServer}/pagination.css" />
```

```javascript
className: 'paginationjs-theme-blue'
```

```javascript
className: 'paginationjs-theme-blue paginationjs-small'
```

```javascript
className: 'paginationjs-theme-blue paginationjs-big'
```

--------------------------------

### Pagination Methods

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Methods to control and query the state of the pagination.

```APIDOC
## Pagination Methods

### disable

To disable the pagination.

Note: If the dataSource is an URL, Pagination will be automatically set to disabled before sending the request, and `enable` will be automatically invoked after the request completed.

### enable

To enable the pagination.

### show

To display the pagination.

### hide

To hide the pagination.

### destroy

To destroy the pagination.

### getCurrentPageNum

Get current page number.

### getTotalPage

Get total page.

### getCurrentPageData

Get data items of current page.

### isDisabled

Whether pagination has been disabled.
```

--------------------------------

### Theming

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Pagination.js supports custom theming to match your application's design. You can apply predefined themes or create your own by adding CSS classes.

```APIDOC
## Theming

Pagination.js comes with 5 default themes. You can also create your own custom themes.

To use a theme, include the `pagination.css` file in your header:

```html
<link rel="stylesheet" href="{yourAssetsServer}/pagination.css" />
```

Available CSS & LESS files: [pagination.css](../dist/2.6.0/pagination.css) [pagination.less](../dist/2.6.0/pagination.less)

### Applying Themes

To apply a theme, use the `className` option:

*   **Blue theme:**
    ```javascript
    className: 'paginationjs-theme-blue'
    ```

*   **Small blue theme:**
    ```javascript
    className: 'paginationjs-theme-blue paginationjs-small'
    ```

*   **Large blue theme:**
    ```javascript
    className: 'paginationjs-theme-blue paginationjs-big'
    ```

### Custom Themes

For complete style customization, add the `custom-paginationjs` CSS class:

```javascript
className: 'custom-paginationjs'
```
```

--------------------------------

### Object Data Source with Locator for Pagination.js

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Use an object as a data source, specifying the array's location within the object using the 'locator' option. Defaults to 'data'.

```javascript
{
        data: ['1', '2', '3', '4']
    }
```

--------------------------------

### Go to Custom Page

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Navigate to a specific page number using the 'go' method. An optional callback can be provided to customize the item's innerHTML for the target page.

```javascript
container.pagination('go', 8)
```

```javascript
container.pagination(8)
```

```javascript
container.pagination('go', 8, function(data, pagination){
	// template method of yourself
})
```

--------------------------------

### Register Lifecycle Event Callbacks in Pagination.js

Source: https://context7.com/superraytin/paginationjs/llms.txt

Define lifecycle events directly within the pagination initialization object. Returning false in specific events like beforeInit or beforePaging can halt the associated action.

```javascript
$('#pagination-container').pagination({
    dataSource: Array.from({length: 50}, (_, i) => i + 1),
    pageSize: 5,

    // Initialization events
    beforeInit: function() {
        console.log('Pagination initializing...');
        // return false; // Stops initialization
    },
    afterInit: function(el) {
        console.log('Pagination initialized:', el);
    },

    // Rendering events
    beforeRender: function(isForced) {
        console.log('About to render, forced:', isForced);
    },
    afterRender: function(isForced) {
        console.log('Rendered, forced:', isForced);
    },

    // Paging events
    beforePaging: function(pageNumber) {
        console.log('Going to page:', pageNumber);
        // return false; // Cancels paging
    },
    afterPaging: function(pageNumber) {
        console.log('Now on page:', pageNumber);
    },

    // Click events
    beforePageOnClick: function(event, pageNumber) {
        console.log('Page button clicked:', pageNumber);
    },
    beforePreviousOnClick: function(event, pageNumber) {
        console.log('Previous clicked, going to:', pageNumber);
    },
    beforeNextOnClick: function(event, pageNumber) {
        console.log('Next clicked, going to:', pageNumber);
    },

    // Boundary events
    afterIsFirstPage: function() {
        console.log('Reached first page');
    },
    afterIsLastPage: function() {
        console.log('Reached last page');
    },

    callback: function(data) { /* ... */ }
});
```

--------------------------------

### Pagination Events

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Callbacks and plugin hooks for various stages of the pagination lifecycle.

```APIDOC
## Pagination Events

Pagination allows you to register all events for the lifetime of a paging behavior.

There are 2 ways: as callbacks or as plugin hooks.

Register events as callbacks:

```js
var container = $("#example1");
container.pagination({
	afterRender: function(){
		// function body
	}
});
```

Register events as plugin hooks:

```js
var container = $("#example2");

container.pagination({
	dataSource: [1, 2, 3],
	pageSize: 1
});

container.addHook('afterRender', function(){
	// function body
});
```

In this way, the hook can be added before Pagination initialized.

### beforeInit

Fired before Pagination instance initialized. Return `false` will stop the initialization.

### beforeRender(isForced)

Fired before Pagination bar rendering. Parameters:

`isForced` is `true` if the rendering is triggered on paging and `false` if it is triggered at initialization.

### beforePaging

Fired before paging.

### beforeSizeSelectorChange

Fired before the size selector changed.

### beforeDestroy

Fired before pagination destroyed.

### beforeDisable

Fired before pagination disabled.

### beforeEnable

Fired before pagination enabled.

### beforePreviousOnClick

Fired before the 'previous' button clicked.

### beforePageOnClick

Fired before page button clicked.

### beforeNextOnClick

Fired before the 'next' button clicked.

### beforeGoInputOnEnter

Fired before `Enter` pressed on the 'Go' input.

### beforeGoButtonOnClick

Fired before the 'Go' button clicked.

### afterInit

Fired after Pagination initialized.

### afterRender(isForced)

Fired after Pagination bar rendered. Parameters:

`isForced` is `true` if the rendering is triggered on paging and `false` if it is triggered at initialization.

### afterPaging

Fired after paging.

### afterSizeSelectorChange

Fired after the size selector changed.

### afterDestroy

Fired after pagination destroyed.

### afterDisable

Fired after pagination disabled.

### afterEnable

Fired after pagination enabled.

### afterPreviousOnClick

Fired after the 'previous' button clicked.

### afterPageOnClick

Fired after page button clicked.

### afterNextOnClick

Fired after the 'next' button clicked.

### afterGoInputOnEnter

Fired after `Enter` pressed on the 'Go' input.

### afterGoButtonOnClick

Fired after the 'Go' button clicked.

### afterIsFirstPage

Fired after current page number is the first.

### afterIsLastPage

Fired after current page number is the last.
```

--------------------------------

### Pagination with Underscore Templating

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Integrates Underscore templating with Pagination.js. The Underscore template is compiled and used to render the data provided by the pagination callback.

```javascript
$('#pagination-container').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        var html = _.template($('#template-demo').html(), {
            data: data
        });
        $('#data-container').html(html);
    }
})
```

--------------------------------

### Locator Option with String for Pagination.js

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Specify the location of the data array within a response object using a string path. Supports dot notation for nested objects.

```javascript
{
	data: ['1', '2', '3', '4']
}
```

```javascript
{
	a: {
		b: ['1', '2', '3', '4']
	}
}
```

--------------------------------

### Custom AJAX Configuration

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Customize the built-in AJAX function for fetching data from a remote server. This object should be parameter-compatible with $.ajax.

```javascript
ajax: {
  type: "POST",
  data: {ajax: {data: {dbType: 'oracle'}}}
}
```

--------------------------------

### Locator Option with Function for Pagination.js

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Use a custom function to dynamically determine the path to the data array within the response. This provides flexibility for complex data structures.

```javascript
locator: function(){
	// Find the position of the array and return
	return 'a.b';
}
```

--------------------------------

### Customize Query Parameter Aliases

Source: https://context7.com/superraytin/paginationjs/llms.txt

Map default pagination parameter names to custom keys for server-side requests.

```javascript
$('#pagination-container').pagination({
    dataSource: '/api/products',
    totalNumber: 200,
    pageSize: 15,
    alias: {
        pageNumber: 'page',
        pageSize: 'limit'
    },
    callback: function(data) { /* ... */ }
});
// Request sent: /api/products?page=1&limit=15
// Instead of: /api/products?pageNumber=1&pageSize=15
```

--------------------------------

### URL Data Source for Pagination.js

Source: https://github.com/superraytin/paginationjs/blob/master/docs/en.md

Fetch data items from a remote server via Ajax. The 'pageNumber' and 'pageSize' parameters are automatically appended to the URL.

```javascript
/test.json
```

```javascript
/test.json?pageNumber=2&pageSize=10
```

--------------------------------

### Pagination with Handlebars Templating

Source: https://github.com/superraytin/paginationjs/blob/master/README.md

Integrates Handlebars templating with Pagination.js. The Handlebars template is compiled and used to render the data provided by the pagination callback.

```javascript
$('#pagination-container').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        var html = Handlebars.compile($('#template-demo').html(), {
            data: data
        });
        $('#data-container').html(html);
    }
})
```

--------------------------------

### Modify Global Defaults

Source: https://github.com/superraytin/paginationjs/blob/master/docs/cn.md

Use $.extend to update the default configuration object, affecting all subsequent pagination instances.

```javascript
$.extend($.fn.pagination.defaults, {
	pageSize: 20
})
```
Tokens:
Raw