Pagination.js

https://pagination.js.org
Admin
Pagination.js is a jQuery plugin that provides flexible pagination functionality for handling large...
Tokens:12,054
Snippets:114
Trust Score:8.1
Update:6 months ago
Show doc for...
Tokens:
Raw
### Basic Pagination Setup

Source: https://pagination.js.org/index.html

Initializes pagination with a local data source and a callback function to render the content.

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

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

### Format Result Data for Display

Source: https://pagination.js.org/index.html

Customize how data items are displayed by modifying the result array. This example appends ' - good guys' to each number.

```javascript
 $("#demo").pagination({
  dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
  pageSize: 8,
  formatResult: function(data) {
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
      result.push(data[i] + ' - good guys');
    }
    return result;
  },
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Modify Data Objects in Format Result

Source: https://pagination.js.org/index.html

Alter properties of data objects within the result array. This example modifies the 'a' property of objects in the data source.

```javascript
 $("#demo").pagination({
  dataSource: [{a :1}, {a :2}, {a :3}, {a :4}, ... , {a :50}],
  pageSize: 8,
  formatResult: function(data) {
    for (var i = 0, len = data.length; i < len; i++) {
      data[i].a = data[i].a + ' - bad guys';
    }
  },
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Initialize and Navigate Pagination

Source: https://pagination.js.org/docs/index.html

Initializes the pagination component and demonstrates navigating to the previous page.

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

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

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

### Initialization Options

Source: https://pagination.js.org/docs/index.html

Control the initial behavior of the pagination component upon loading.

```APIDOC
## triggerPagingOnInit

### Description
Determines whether to trigger the default pagination at initialization.
If you have already set innerHTML for the first page before Pagination initialization, you can set this option to `false` to prevent unnecessary paging once.

### Type
- boolean (default `true`)

## resetPageNumberOnInit

### Description
Reset page number to `1` when Pagination initialized/reinitialized and dataSource is an URL.

### Type
- boolean (default `true`)

## hideOnlyOnePage

### Description
Determines whether to hide pagination when there is only one page.

### Type
- boolean (default `false`)
```

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

### Pagination.js Constructor Configuration

Source: https://pagination.js.org/docs/index-cn.html

Configuration options for initializing the Pagination.js component.

```APIDOC
## Pagination.js Constructor Configuration

### Description
Configuration parameters used when initializing the Pagination.js component.

### Parameters
#### Data Source Configuration
- **dataSource** (array | string | object | function) - Required - The data source for pagination. Supports Array, Object (with locator), Function (custom logic/async), or URL (Ajax/JSONP).
- **locator** (string | function) - Optional - Specifies the path to the array within the data source object. Defaults to 'data'.
- **totalNumber** (number) - Optional - Total number of items. Required for async pagination.
- **totalNumberLocator** (function) - Optional - Function to extract total number from remote response.
- **pageNumber** (number) - Optional - Initial page number (default 1).
- **pageSize** (number) - Optional - Items per page (default 10).
- **pageRange** (number) - Optional - Number of visible page numbers around the current page (default 2).
- **callback** (function) - Optional - Callback function triggered on page change. Receives (data, pagination).
- **alias** (object) - Optional - Aliases for request parameters (e.g., {pageNumber: 'pageNum'}).

#### Display Control
- **showPrevious** (boolean) - Optional - Show 'Previous' button (default true).
- **showNext** (boolean) - Optional - Show 'Next' button (default true).
- **showPageNumbers** (boolean) - Optional - Show page numbers (default true).
- **showSizeChanger** (boolean) - Optional - Show pageSize selector (default false).
- **sizeChangerOptions** (array) - Optional - Options for pageSize selector (default [10, 20, 50, 100]).
- **showNavigator** (boolean) - Optional - Show navigator (default false).
- **showGoInput** (boolean) - Optional - Show jump input box (default false).
- **showGoButton** (boolean) - Optional - Show jump button (default false).
- **hideFirstOnEllipsisShow** (boolean) - Optional - Hide first page number when ellipsis is shown (default false).

### Request Example
{
  "dataSource": "/test.json",
  "pageSize": 10,
  "showGoButton": true,
  "alias": {
    "pageNumber": "pageNum",
    "pageSize": "limit"
  }
}
```

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

### Registering Callbacks for Pagination Events

Source: https://pagination.js.org/docs/index.html

Illustrates how to register event callbacks, such as 'afterRender', during pagination initialization.

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

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

### Define Pagination Events

Source: https://pagination.js.org/docs/index-cn.html

Demonstrates how to handle pagination events using either callback functions during initialization or by adding hooks to an existing instance.

```javascript

  1. var container = $('#example1');
  2. container.pagination({
  3.     afterRender: function(){
  4.         // function body
  5.     }
  6. });


```

```javascript

  1. var container = $('#example2');
  2.   3. container.pagination({
  4.     dataSource: [1, 2, 3],
  5.     pageSize: 1
  6. });
  7.   8. container.addHook('afterRender', function(){
  9.     // function body
  10. });


```

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

### AJAX Configuration

Source: https://pagination.js.org/docs/index.html

Configure how Pagination.js fetches data from a remote server using AJAX.

```APIDOC
## ajax

### Description
Used to customize configuration for the built-in Ajax function. It must be parameter-compatible with `$.ajax`. Useful when you want to fetch data items from a remote server.

### Parameters
- **type** (string) - The type of request to make (e.g. "POST", "GET", "PUT"); Default is `GET`.
- **dataType** (string) - Data type for the request. `xml`, `json`, `jsonp`, other formats supported by jQuery. Default is `json`.
- **data** (object) - By default, `pageNumber` and `pageSize` will be sent. If you need additional data to be sent to the server. set this option. For example: `{ ajax: { data: {dbType: 'oracle'} } }`.
- **cache** (boolean) - If set to `false`, it will force requested pages not to be cached by the browser. Default is `true`.
- **async** (boolean) - By default, all requests are sent asynchronously. If you need synchronous requests, set this option to `false`. Default is `true`.
- **beforeSend** (function) - A pre-request callback function that can be used to modify the jqXHR object before it is sent. Returning `false` in the `beforeSend` function will cancel the request.
- **pageNumberStartWithZero** (boolean) - By default, the passed `pageNumber` (or an alias if specified) will be `1`. If your backend indexes pages starting with zero rather than 1, just set `pageNumberStartWithZero: true`.

For more info on the parameters, refer to the JQuery API Documentation.

## ajaxFunction

### Description
A function to use as a replacement for `$.ajax()`. This function will be called with a single object parameter containing the same parameters as `$.ajax()`. Use this to implement a custom ajax function for pagination. The provided function must call either `settings.success(response)` where `response` is the returned data array or `settings.error(jqXHR, textStatus, errorThrown)`. The parameters for the error function are passed to the `formatAjaxError` function if one is provided. These are the same parameters provided by the built-in Ajax function.

### Parameters
- **settings** (object) - An object containing the AJAX request settings, similar to `$.ajax()` parameters.
```

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

### Pagination Methods

Source: https://pagination.js.org/docs/index.html

Methods to control the pagination instance after initialization.

```APIDOC
## Pagination Methods

### Description
Methods used to manipulate the pagination state and retrieve information after the plugin has been initialized on a container.

### Methods
- **previous()**: Go to the previous page.
- **next()**: Go to the next page.
- **go(pageNumber, callback)**: Go to a specific page. Optionally provide a callback to customize the target page's innerHTML.
- **disable()**: Disable the pagination.
- **enable()**: Enable the pagination.
- **show()**: Display the pagination.
- **hide()**: Hide the pagination.
- **destroy()**: Destroy the pagination instance.
- **getCurrentPageNum()**: Returns the current page number.
- **getTotalPage()**: Returns the total number of pages.
- **getCurrentPageData()**: Returns the data items of the current page.
- **isDisabled()**: Returns a boolean indicating if the pagination is disabled.
```

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

### Configure Pagination with Flickr API

Source: https://pagination.js.org/index.html

Set up pagination to fetch data from the Flickr API. Includes custom total number calculation and AJAX loading indicators.

```javascript
 $("#demo").pagination({
  dataSource: "https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
  locator: "items",
  totalNumberLocator: function(response) {
    // you can return totalNumber by analyzing response content
    return Math.floor(Math.random() * (1000 - 100)) + 100;
  },
  pageSize: 20,
  ajax: {
    beforeSend: function() {
      dataContainer.html('Loading data from flickr.com ...');
    }
  },
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Configuring Defaults

Source: https://pagination.js.org/docs/index-cn.html

How to modify the default configuration options for all pagination instances.

```APIDOC
# Configuring Defaults

Default configuration options can be modified using the `$.fn.pagination.defaults` object. These changes will affect all subsequently created pagination instances.

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

After this modification, all new pagination instances will have a default `pageSize` of 20.
```

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

### Pagination with Go Input and Button

Source: https://pagination.js.org/index.html

Adds an input field and button to jump directly to a specific page number.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],
  3.     pageSize: 5,
  4.     showGoInput: true,
  5.     showGoButton: true,
  6.     callback: function(data, pagination) {
  7.         // template method of yourself
  8.         var html = template(data);
  9.         dataContainer.html(html);
  10.     }
  11. })
```

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

### Commonly Used Options

Source: https://pagination.js.org/docs/index.html

Configuration options for data source, total number of items, page number, page size, and page range.

```APIDOC
## Commonly Used Options

### dataSource _array | string | object | function_
`dataSource` can be one of the following 4 formats:
  1. **Array**
     an array data, eg:
     ```javascript
     ['1', '2', '3', '4']
     ```
  2. **Object**
     an object that contained the array data, meanwhile, you should specify that array via `locator: 'data'`.
     ```javascript
     {
         data: ['1', '2', '3', '4']
     }
     ```
  3. **Function**
     a function that will indicate the array data.
     ```javascript
     dataSource: function(done){
         var result = [];
         for(var i = 1; i < 196; i++){
             result.push(i);
         }
         done(result);
     }
     ```
     You can also send a request to get your data, and then call `done` to return the array data.
     ```javascript
     dataSource: function(done){
         $.ajax({
             type: 'GET',
             url: '/test.json',
             success: function(response){
                 done(response);
             }
         });
     }
     ```
  4. **URL**
     Query data items for each paging from a remote server via Ajax. Usually you will use it with a `locator` to specify the location of the array containing data items within the response. The full response of the Ajax request is available as the `originalResponse` property of the `pagination` object passed to `callback`.
     ```javascript
     /test.json
     ```
     For each pagination request, these two parameters `pageNumber` `pageSize` will be appended to the request url. You can customize their names via `alias`.
     ```javascript
     /test.json?pageNumber=2&pageSize=10
     ```

### locator _string | function (default`data`)_
When the data source is not an array type, this option is used to indicate the position of the array in the data source.
Using as a string:
`locator: 'data'`:
```javascript
{
    data: ['1', '2', '3', '4']
}
```
locator uses to-function, so you can use dot notation to traverse the result array, such as `locator: 'a.b'`:
```javascript
{
    a: {b: ['1', '2', '3', '4']}
}
```
Using as a function:
Provides a custom function to find the position of the array data.
```javascript
locator: function() {
    // find data and return
    return 'a.b';
}
```
The data got via Ajax also follow this rule.

### totalNumber _number (default`0`)_
When the dataSource is an URL, you should pass a `totalNumber` to specify the total number of data items (or via `totalNumberLocator`). OtherWise, it will not take effect as total number will be calculated automatically.

### totalNumberLocator _function(response)_
Useful when the dataSource is an URL, and you expect specifies one of the field value in the request's response as the `totalNumber`.
Note: Pagination will ignore `totalNumber` option when `totalNumberLocator` specified.
See demo

### pageNumber _number (default`1`)_
Default page number at initialization.

### pageSize _number (default`10`)_
Number of data items per page.

### pageRange _number (default`2`)_
`pageRange` defines a range of pages that should be display around current page. For example, if current page number is `6` and `pageRange` is set to 2, then pagination bar will be displayed as like this '1 ... 4 5`6`7 8 ... 11 12'.
If you want to show all pages, just set it to `null`.
```

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

### Registering Plugin Hooks for Pagination Events

Source: https://pagination.js.org/docs/index.html

Demonstrates registering an event hook ('afterRender') before the pagination component is initialized, allowing for pre-initialization event handling.

```javascript
var container = $("#example2");
  
container.pagination({
    dataSource: [1, 2, 3],
    pageSize: 1
});
  
container.addHook('afterRender', function(){
    // function body
});
```

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

### Apply Small Blue Theme

Source: https://pagination.js.org/docs/index.html

Combine 'paginationjs-theme-blue' with 'paginationjs-small' for a smaller blue theme.

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

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

### Apply Custom Theme

Source: https://pagination.js.org/docs/index.html

Add 'custom-paginationjs' to the className option to apply your fully customized styles.

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

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

### Enable Go Input and Button with Custom Format

Source: https://pagination.js.org/index.html

Add functionality for users to directly navigate to a specific page using an input field and a button. The 'formatGoInput' customizes the input's label.

```javascript
 $("#demo").pagination({
  dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 25],
  pageSize: 5,
  showGoInput: true,
  showGoButton: true,
  formatGoInput: 'go to <%= input %> st/rd/th',
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Display Control Options

Source: https://pagination.js.org/docs/index.html

Configure the visibility and behavior of various pagination elements like previous/next buttons, page numbers, size changer, and navigator.

```APIDOC
## Display Control Options

### Description
These options control the visibility and behavior of different pagination UI elements.

### Options
- **showPrevious** (boolean, default: `true`) - Display the 'Previous' button.
- **showNext** (boolean, default: `true`) - Display the 'Next' button.
- **showPageNumbers** (boolean, default: `true`) - Display page number buttons.
- **showSizeChanger** (boolean, default: `false`) - Display the size changer control.
- **sizeChangerOptions** (array, default: `[10, 20, 50, 100]`) - Options available in the size selector.
- **showNavigator** (boolean, default: `false`) - Display the navigator input.
- **showGoInput** (boolean, default: `false`) - Display the 'Go' input box.
- **showGoButton** (boolean, default: `false`) - Display the 'Go' button.
- **hideFirstOnEllipsisShow** (boolean, default: `false`) - Hide the first page number button when ellipsis is shown.
- **hideLastOnEllipsisShow** (boolean, default: `false`) - Hide the last page number button when ellipsis is shown.
- **autoHidePrevious** (boolean, default: `false`) - Automatically hide the 'Previous' button on the first page.
- **autoHideNext** (boolean, default: `false`) - Automatically hide the 'Next' button on the last page.

### Example Usage for `hideFirstOnEllipsisShow`
```javascript
{
  hideFirstOnEllipsisShow: true,
  pageRange: 1,
  totalNumber: 100,
  pageSize: 10
}
```
This configuration would result in a pagination bar like: `... 4 5 6 ... 10`.

### Example Usage for `hideLastOnEllipsisShow`
```javascript
{
  hideLastOnEllipsisShow: true,
  pageRange: 1,
  totalNumber: 100,
  pageSize: 10
}
```
This configuration would result in a pagination bar like: `1 ... 4 5 6 ...`.
```

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

### Configure Data Locator

Source: https://pagination.js.org/docs/index.html

Specify the path to the array within the data source using strings or functions.

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

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

```javascript
locator: function() {
    // find data and return
    return 'a.b';
}
```

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

### Basic Pagination with Array Data

Source: https://pagination.js.org/index.html

Initialize pagination with a simple array as the data source and a custom page number. The callback function renders the data.

```javascript
 $("#demo").pagination({
  dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
  pageSize: 5,
  pageNumber: 3,
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Formatting Options

Source: https://pagination.js.org/docs/index.html

Customize the appearance and content of pagination elements like the 'Go' input, 'Go' button, header, and footer.

```APIDOC
## formatGoInput

### Description
Formats the `Go` input according to the specified variables. Accepts a `string` or a `function` that return those strings. Default is `<%= input %>`.
`<%= input %>` is equivalent to `<input type= "text" class= "J-paginationjs-go-pagenumber" >`, therefore, you can also customize an input element yourself, just ensure that the class name of the input contains `J-paginationjs-go-pagenumber`.

### Parameters
- **input** (string | function) - The template string or function for the input.
- **currentPage** (number) - The current page number.
- **totalPage** (number) - The total number of pages.
- **totalNumber** (number) - The total number of items.

### Available Template Variables
- `input`
- `currentPage`
- `totalPage`
- `totalNumber`

## formatGoButton

### Description
Formats the `Go` button according to the specified variables. Accepts a `string` or a `function` that return those strings. Default is `<%= button %>`.
`<%= button %>` is equivalent to `<input type="button" class="J-paginationjs-go-button">`, therefore, you can also customize an button element yourself, just ensure that the class name of the button contains `J-paginationjs-go-button`.

### Parameters
- **button** (string | function) - The template string or function for the button.
- **currentPage** (number) - The current page number.
- **totalPage** (number) - The total number of pages.
- **totalNumber** (number) - The total number of items.

### Available Template Variables
- `button`
- `currentPage`
- `totalPage`
- `totalNumber`

## header

### Description
Prepend extra contents to the pagination buttons. Accepts a `string` or a `function` that will return the extra contents.

### Parameters
- **currentPage** (number) - The current page number.
- **totalPage** (number) - The total number of pages.
- **totalNumber** (number) - The total number of items.

## footer

### Description
Append extra contents to the pagination buttons. Accepts a `string` or a `function` that will return the extra contents.

### Parameters
- **currentPage** (number) - The current page number.
- **totalPage** (number) - The total number of pages.
- **totalNumber** (number) - The total number of items.
```

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

### Skin Customization

Source: https://pagination.js.org/docs/index-cn.html

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

```APIDOC
# Skin

The pagination component includes 5 default themes. Custom themes can also be applied.

### Applying Themes
Include the pagination CSS file in your header:
```html
<link rel="stylesheet" href="{yourAssetsServer}/pagination.css" />
```

Available CSS & LESS files: `pagination.css`, `pagination.less`

### Example Themes:

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

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

- **Big Blue Theme:**
  ```javascript
  className: 'paginationjs-theme-blue paginationjs-big'
  ```

For complete custom styling, add the `custom-paginationjs` CSS class.
```

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

### Include Pagination Styles

Source: https://pagination.js.org/docs/index-cn.html

Reference the required CSS file in the document header.

```html

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


```

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

### Configure Global Defaults

Source: https://pagination.js.org/docs/index-cn.html

Modify the default settings for all future pagination instances using $.extend.

```javascript

  1. $.extend($.fn.pagination.defaults, {
  2.     pageSize: 20
  3. })


```

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

### Go to Specific Page in Pagination

Source: https://pagination.js.org/docs/index.html

Demonstrates two ways to navigate to a specific page (page 8) using the 'go' method or direct page number.

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

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

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

### Apply Pagination Themes

Source: https://pagination.js.org/docs/index-cn.html

Configure the className property to apply different built-in themes and size variants.

```javascript

  1. className: 'paginationjs-theme-blue'


```

```javascript

  1. className: 'paginationjs-theme-blue paginationjs-small'


```

```javascript

  1. className: 'paginationjs-theme-blue paginationjs-big'


```

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

### Configure parameter aliases

Source: https://pagination.js.org/docs/index.html

Customize the query parameter names for page number and page size when fetching data from a remote server.

```javascript

  1. alias: {
  2.     pageNumber: 'pageNum',
  3.     pageSize: 'limit'
  4. }


```

```text

  1. /test.json?pageNum=2&limit=10   


```

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

### Configure Locator

Source: https://pagination.js.org/docs/index-cn.html

Specify how to locate the data array within an object or via a function.

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

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

```javascript
locator: function(){
    // find data and return
    return 'a.b';
}
```

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

### Pagination Events

Source: https://pagination.js.org/docs/index.html

Lifecycle hooks and event callbacks for the pagination instance.

```APIDOC
## Pagination Events

### Description
Events that can be registered as callbacks during initialization or via plugin hooks to respond to lifecycle changes.

### Event Hooks
- **beforeInit**: Fired before initialization. Returning false stops initialization.
- **beforeRender(isForced)**: Fired before rendering.
- **beforePaging**: Fired before paging.
- **beforeDestroy**: Fired before destruction.
- **afterInit**: Fired after initialization.
- **afterRender**: Fired after rendering.
- **afterPaging**: Fired after paging.
- **afterDestroy**: Fired after destruction.
- **onError(errorThrown, errorType)**: Fired when an error occurs during rendering.
```

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

### Apply Big Blue Theme

Source: https://pagination.js.org/docs/index.html

Combine 'paginationjs-theme-blue' with 'paginationjs-big' for a larger blue theme.

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

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

### Configure Parameter Aliases

Source: https://pagination.js.org/docs/index-cn.html

Rename default pagination parameters for Ajax requests.

```javascript
alias: {
    pageNumber: 'pageNum',
    pageSize: 'limit'
}
```

```javascript
/test.json?pageNum=2&limit=10
```

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

### Apply Blue Theme

Source: https://pagination.js.org/docs/index.html

Use the 'paginationjs-theme-blue' class to apply the default blue theme to your pagination.

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

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

### Define URL Data Source

Source: https://pagination.js.org/docs/index-cn.html

Provide a URL for Ajax-based pagination.

```javascript
/test.json
```

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

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

### Configure Default Page Size

Source: https://pagination.js.org/docs/index.html

Modify the global default pageSize for all new pagination instances by extending $.fn.pagination.defaults.

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

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

### Define Array Data Source

Source: https://pagination.js.org/docs/index-cn.html

Directly provide an array as the data source.

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

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

### Display Pagination Navigator with Custom Format

Source: https://pagination.js.org/index.html

Enable and customize the pagination navigator to show the current range and total number of items. The 'position' option places it at the top.

```javascript
 $("#demo").pagination({
  dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 15],
  pageSize: 5,
  showNavigator: true,
  formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items',
  position: 'top',
  callback: function(data, pagination) {
    // template method of yourself
    var html = template(data);
    dataContainer.html(html);
  }
})
```

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

### Pagination Methods

Source: https://pagination.js.org/docs/index-cn.html

Methods to control the pagination component's state and retrieve information.

```APIDOC
## disable

### Description
Disables the pagination component, making it unusable. It can be re-enabled using the `enable` method.
Automatically called before each asynchronous page request and `enable` is called after a successful request.

### Method
`disable()`
```

```APIDOC
## enable

### Description
Enables the pagination component, restoring its usability.

### Method
`enable()`
```

```APIDOC
## show

### Description
Displays the pagination component.

### Method
`show()`
```

```APIDOC
## hide

### Description
Hides the pagination component.

### Method
`hide()`
```

```APIDOC
## destroy

### Description
Destroys the pagination instance, removing it and its associated event listeners.

### Method
`destroy()`
```

```APIDOC
## getCurrentPageNum

### Description
Retrieves the current page number.

### Method
`getCurrentPageNum()`

### Returns
- `number` - The current page number.
```

```APIDOC
## getTotalPage

### Description
Retrieves the total number of pages.

### Method
`getTotalPage()`

### Returns
- `number` - The total number of pages.
```

```APIDOC
## getCurrentPageData

### Description
Retrieves the data for the current page.

### Method
`getCurrentPageData()`

### Returns
- `array` - An array containing the data for the current page.
```

```APIDOC
## isDisabled

### Description
Checks if the pagination component is currently disabled.

### Method
`isDisabled()`

### Returns
- `function` - Returns a boolean indicating if the pagination is disabled.
```

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

### Custom Callback for Target Page in Pagination

Source: https://pagination.js.org/docs/index.html

Shows how to provide a custom callback function to customize the inner HTML of items on the target page when navigating.

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

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

### Style Options

Source: https://pagination.js.org/docs/index.html

Customize the CSS classes used for pagination elements to control the visual appearance.

```APIDOC
## Style Options

### Description
These options allow you to customize the CSS class names applied to the pagination elements for styling purposes.

### Options
- **classPrefix** (string) - Prefix for all pagination element class names. Default is `paginationjs`.
- **className** (string) - Additional CSS class(es) for the root pagination element.
- **activeClassName** (string) - CSS class(es) for the active page button. Default is `active`.
- **disableClassName** (string) - CSS class(es) for disabled buttons. Default is `disabled`.
- **ulClassName** (string) - CSS class(es) for the inner `<ul>` element.
- **pageClassName** (string) - CSS class(es) for individual page number buttons.
- **prevClassName** (string) - CSS class(es) for the 'Previous' button.
- **nextClassName** (string) - CSS class(es) for the 'Next' button.
```

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

### Pagination Showing All Pages

Source: https://pagination.js.org/index.html

Disables the page range limit to show all available page numbers.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
  3.     pageSize: 5,
  4.     pageRange: null,
  5.     showPageNumbers: true,
  6.     callback: function(data, pagination) {
  7.         // template method of yourself
  8.         var html = template(data);
  9.         dataContainer.html(html);
  10.     }
  11. })
```

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

### Define Function Data Source

Source: https://pagination.js.org/docs/index.html

Use a function to generate or fetch data, calling the done callback with the result.

```javascript
dataSource: function(done){
    var result = [];
    for(var i = 1; i < 196; i++){
        result.push(i);
    }
    done(result);
}
```

```javascript
dataSource: function(done){
    $.ajax({
        type: 'GET',
        url: '/test.json',
        success: function(response){
            done(response);
        }
    });
}
```

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

### Mini Pagination Display

Source: https://pagination.js.org/index.html

Displays a compact version of the pagination component, hiding page numbers and showing a navigator.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
  3.     pageSize: 5,
  4.     showPageNumbers: false,
  5.     showNavigator: true,
  6.     callback: function(data, pagination) {
  7.         // template method of yourself
  8.         var html = template(data);
  9.         dataContainer.html(html);
  10.     }
  11. })
```

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

### Pagination with Page Size Changer

Source: https://pagination.js.org/index.html

Enables a dropdown or selector to change the number of items displayed per page.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
  3.     pageSize: 5,
  4.     showSizeChanger: true,
  5.     callback: function(data, pagination) {
  6.         // template method of yourself
  7.         var html = template(data);
  8.         dataContainer.html(html);
  9.     }
  10. })
```

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

### Asynchronous Data Pagination

Source: https://pagination.js.org/index.html

Fetches data from an external API using AJAX, including a loading state callback.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
  3.     locator: 'items',
  4.     totalNumber: 120,
  5.     pageSize: 20,
  6.     ajax: {
  7.         beforeSend: function() {
  8.             dataContainer.html('Loading data from flickr.com ...');
  9.         }
  10.     },
  11.     callback: function(data, pagination) {
  12.         // template method of yourself
  13.         var html = template(data);
  14.         dataContainer.html(html);
  15.     }
  16. })
```

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

### Define Function Data Source

Source: https://pagination.js.org/docs/index-cn.html

Use a custom function to generate or fetch data asynchronously.

```javascript
dataSource: function(done){
    var result = [];
    4.     for(var i = 1; i < 196; i++){
        result.push(i);
    }
    8.     done(result);
}
```

```javascript
dataSource: function(done){
    $.ajax({
        type: 'GET',
        url: '/test.json',
        success: function(response){
            done(response);
        }
    });
}
```

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

### Customizable Text

Source: https://pagination.js.org/docs/index.html

Modify the default text labels for pagination controls like previous, next, ellipsis, and go buttons, as well as the navigator format.

```APIDOC
## Customizable Text

### Description
Allows customization of the text content for various pagination elements and the navigator display.

### Options
- **prevText** (string, default: `&laquo;`) - Custom label for the 'Previous' button.
- **nextText** (string, default: `&raquo;`) - Custom label for the 'Next' button.
- **ellipsisText** (string, default: `...`) - Custom label for the ellipsis button.
- **goButtonText** (string, default: `Go`) - Custom label for the 'Go' button.
- **formatNavigator** (string | function, default: `Total <%= totalNumber %> items`)
  - Formats the navigator text. Can be a string with template variables or a function returning a string.
  - Available template variables: `currentPage`, `totalPage`, `totalNumber`, `rangeStart`, `rangeEnd`.

### Navigator Format Examples
Given `totalNumber = 195` and `pageSize = 10`:
- String: `<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items`
  Output: `1-20 of 195 items`
- String: `Total <%= totalNumber %> items`
  Output: `Total 195 items`
- String: `<%= currentPage %> / <%= totalPage %>`
  Output: `1 / 10`

### Example Usage
```javascript
{
  prevText: 'Back',
  nextText: 'Forward',
  formatNavigator: function(currentPage, totalPage, totalNumber) {
    return `Page ${currentPage} of ${totalPage} (${totalNumber} items)`;
  }
}
```
```

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

### Define Object Data Source

Source: https://pagination.js.org/docs/index-cn.html

Provide an object containing the data array, optionally using a locator.

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

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

### Callback Function

Source: https://pagination.js.org/docs/index.html

The `callback` function is invoked on each page change to customize item rendering. It receives the data for the current page and pagination details.

```APIDOC
## Callback Function

### Description
Used to customize item's innerHTML, will be invoked on each paging. It takes the resulting data and pagination information as its arguments.

### Parameters
#### Function Parameters
- **data** (array) - Item data of the current page.
- **pagination** (object) - Pagination data for the current page.

### Pagination Object Properties
- **pageNumber** (number) - Current page number.
- **pageRange** (number) - Current page range.
- **pageSize** (number) - Number of data items per page.
- **totalPage** (number) - Total number of pages.
- **totalNumber** (number) - Total number of data items.
- **el** (jQuery object) - The pagination container element.
- **direction** (number) - Pagination direction: `-1` for forward, `1` for backward, `0` for initialization.
- **originalResponse** (object) - The original response from the server if `dataSource` is a URL.

### Example
```javascript
callback: function(data, pagination) {
  // Custom rendering logic here
}
```
```

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

### Define Callback Function

Source: https://pagination.js.org/docs/index-cn.html

Handle pagination events with a callback function.

```javascript
callback: function(data, pagination){ ... }
```

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

### Pagination without Previous and Next Buttons

Source: https://pagination.js.org/index.html

Configures pagination to hide the previous and next navigation buttons.

```javascript
  1. $('#demo').pagination({
  2.     dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
  3.     pageSize: 5,
  4.     showPrevious: false,
  5.     showNext: false,
  6.     callback: function(data, pagination) {
  7.         // template method of yourself
  8.         var html = template(data);
  9.         dataContainer.html(html);
  10.     }
  11. })
```

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

### Configure Ellipsis Display

Source: https://pagination.js.org/docs/index-cn.html

Control the visibility of the first page when ellipsis are shown.

```javascript
hideFirstOnEllipsisShow: true,
pageRange: 1,
totalNumber: 100,
pageSize: 10
```

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

### Link Pagination CSS

Source: https://pagination.js.org/docs/index.html

Include the pagination CSS file in the header of your HTML to apply default styling.

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

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

### Pagination Events

Source: https://pagination.js.org/docs/index-cn.html

Event hooks that can be used to execute custom logic at various stages of the pagination lifecycle.

```APIDOC
## Event Usage

Events can be used via callback functions during initialization or as plugin hooks after initialization.

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

### Using Plugin Hooks:
```javascript
var container = $('#example2');
container.pagination({
    dataSource: [1, 2, 3],
    pageSize: 1
});
container.addHook('afterRender', function(){
    // function body
});
```

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

```APIDOC
### beforeInit

### Description
Callback function executed before the pagination instance is initialized. Returning `false` will prevent initialization.

### Type
`function`
```

```APIDOC
### beforeRender

### Description
Callback function executed before the pagination bar is rendered. `isForced` is `true` if rendering is triggered by a page change, `false` if by initialization.

### Type
`function(isForced)`
```

```APIDOC
### beforePaging

### Description
Callback function executed before paging occurs.

### Type
`function`
```

```APIDOC
### beforeSizeSelectorChange

### Description
Callback function executed before the page size is changed.

### Type
`function`
```

```APIDOC
### beforeDestroy

### Description
Callback function executed before the pagination instance is destroyed.

### Type
`function`
```

```APIDOC
### beforeDisable

### Description
Callback function executed before the pagination is disabled.

### Type
`function`
```

```APIDOC
### beforeEnable

### Description
Callback function executed before the pagination is enabled.

### Type
`function`
```

```APIDOC
### beforePreviousOnClick

### Description
Callback function executed before the previous page button is clicked.

### Type
`function`
```

```APIDOC
### beforePageOnClick

### Description
Callback function executed before a page number is clicked.

### Type
`function`
```

```APIDOC
### beforeNextOnClick

### Description
Callback function executed before the next page button is clicked.

### Type
`function`
```

```APIDOC
### beforeGoInputOnEnter

### Description
Callback function executed before the enter key is pressed in the go to page input.

### Type
`function`
```

```APIDOC
### beforeGoButtonOnClick

### Description
Callback function executed before the go button is clicked.

### Type
`function`
```

```APIDOC
### afterInit

### Description
Callback function executed after the pagination instance has been initialized.

### Type
`function`
```

```APIDOC
### afterRender

### Description
Callback function executed after the pagination bar has been rendered. `isForced` is `true` if rendering is triggered by a page change, `false` if by initialization.

### Type
`function(isForced)`
```

```APIDOC
### afterPaging

### Description
Callback function executed after paging occurs.

### Type
`function`
```

```APIDOC
### afterSizeSelectorChange

### Description
Callback function executed after the page size is changed.

### Type
`function`
```

```APIDOC
### afterDestroy

### Description
Callback function executed after the pagination instance has been destroyed.

### Type
`function`
```

```APIDOC
### afterDisable

### Description
Callback function executed after the pagination is disabled.

### Type
`function`
```

```APIDOC
### afterEnable

### Description
Callback function executed after the pagination is enabled.

### Type
`function`
```

```APIDOC
### afterPreviousOnClick

### Description
Callback function executed after the previous page button is clicked.

### Type
`function`
```

```APIDOC
### afterPageOnClick

### Description
Callback function executed after a page number is clicked.

### Type
`function`
```

```APIDOC
### afterNextOnClick

### Description
Callback function executed after the next page button is clicked.

### Type
`function`
```

```APIDOC
### afterGoInputOnEnter

### Description
Callback function executed after the enter key is pressed in the go to page input.

### Type
`function`
```

```APIDOC
### afterGoButtonOnClick

### Description
Callback function executed after the go button is clicked.

### Type
`function`
```

```APIDOC
### afterIsFirstPage

### Description
Callback function executed when the current page is the first page.

### Type
`function`
```

```APIDOC
### afterIsLastPage

### Description
Callback function executed when the current page is the last page.

### Type
`function`
```

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

### Utility Functions

Source: https://pagination.js.org/docs/index.html

Provides utility functions for data formatting, AJAX error handling, and AJAX request customization.

```APIDOC
## formatResult

### Description
Formats the data items of current page before `callback` invoked. In this function, you should return a result array, also you can process the original `data` directly.

### Parameters
- **data** (any) - The data for the current page.

### Returns
- Array - The formatted data items for the current page.

## formatAjaxError

### Description
A function to be called if the dataSource is an URL and request fails.

### Parameters
- **jqXHR** (object) - The XMLHttpRequest object.
- **textStatus** (string) - Describes the type of error that occurred.
- **errorThrown** (string) - The textual portion of the HTTP status, even if not an error code.

### Example
```javascript
1. formatAjaxError: function(jqXHR, textStatus, errorThrown){ ... }
```

For more info on the parameters, refer to the JQuery API Documentation.
```

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

### Configure ellipsis display settings

Source: https://pagination.js.org/docs/index.html

Control the visibility of the first or last page number buttons when ellipsis are displayed.

```javascript

  1. hideFirstOnEllipsisShow: true,
  2. pageRange: 1,
  3. totalNumber: 100,
  4. pageSize: 10


```

```javascript

  1. hideLastOnEllipsisShow: true,
  2. pageRange: 1,
  3. totalNumber: 100,
  4. pageSize: 10


```

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

### Custom AJAX Function - ajaxFunction

Source: https://pagination.js.org/docs/index.html

Provides a way to replace the default $.ajax() function for custom AJAX requests. It must call settings.success() or settings.error().

```javascript
ajaxFunction: function(settings) { ... }
```
Tokens:
Raw