# Paging | tablefilter v0.4.16 API Document

    import {Paging} from 'tablefilter/src/modules/paging.js'

public class | source

# Paging

#### Extends:

Feature → Paging

Paging UI component

## Constructor Summary

Public Constructor
public | constructor (tf: TableFilter) Creates an instance of Paging |

## Member Summary

Public Members
public | btnFirstPageHtml : String First page button HTML |
public | btnFirstPageText : String First page button text |
public | btnLastPageHtml : String Last page button HTML |
public | btnLastPageText : String Last page button text |
public | btnNextPageHtml : String Next page button HTML |
public | btnNextPageText : String Next page button text |
public | btnPageCssClass : String Css class for the paging buttons (previous, next, etc.) |
public | btnPrevPageHtml : String Previous page button HTML |
public | btnPrevPageText : String Previous page button text |
public | hasPagingBtns : Boolean Determines if paging buttons are enabled (default: true) |
public | hasResultsPerPage : Boolean Determines if results per page is configured |
public | initialized : boolean |
public | nbPgSpanCssClass : String Css class for the span containing total number of pages |
public | ofText : String Text after page selector drop-down |
public | onAfterChangePage : Function Callback fired after the page is changed |
public | onBeforeChangePage : Function Callback fired before the page is changed |
public | pageSelectorType : String Defines page selector type, two possible values: 'select', 'input' |
public | pageText : String Text preceeding page selector drop-down |
public | pagingLength : Number Number of rows contained in a page |
public | pagingSlc : DOMElement Main select DOM element |
public | pagingTgtId : String ID of custom container element |
public | pgInpCssClass : String Css class for the paging input element |
public | pgSlcCssClass : String Css class for the paging select element |
public | resultsPerPage : Array Label and values for the results per page select, example of usage: ['Records: ', [10,25,50,100]] |
public | resultsPerPageSlc : DOMElement Results per page select DOM element |
public | resultsPerPageTgtId : String ID of custom container element for the results per page selector |
public | resultsSlcCssClass : String Css class for the results per page select |
public | resultsSpanCssClass : String Css class for the label preceding results per page select |

## Method Summary

Public Methods
public | changePage (index: Number) Change the page based on passed index |
public | changeResultsPerPage (val: String) Change the number of results per page based on passed value |
public | destroy () Remove paging feature |
public | getPage (): Number Return the current page number |
public | groupByPage (validRows: Array) Group table rows by page and display valid rows |
public | init () Initialize DOM elements |
public | onChangeResultsPerPage () Change rows according to page results drop-down |
public | removeResultsPerPage () Remove number of results per page UI elements |
public | reset (filterTable: Boolean) Reset paging when filters are already instantiated |
public | resetPage () Re-set page nb at page re-load |
public | resetPageLength () Re-set page length value at page re-load |
public | resetPagingInfo () Reset paging info from scratch after a filtering process |
public | setPage (cmd: String}/{Number) Show page defined by passed argument (string or number): |
public | setPagingInfo (validRows: Array) Calculate number of pages based on valid rows Refresh paging select according to number of pages |
public | setResultsPerPage () Generates UI elements for the number of results per page drop-down |

## Inherited Summary

From class Feature
public | config : Object TableFilter configuration |
public | emitter : Emitter TableFilter emitter instance |
public | enabled : Boolean TableFilter feature setting |
public | feature : String Feature name |
public | initialized : Boolean Field indicating whether Feature is initialized |
public | tf : TableFilter TableFilter instance |
public | destroy () Destroy the feature |
public | disable () Disable the feature |
public | enable () Enable the feature |
public | init () Initialize the feature |
public | isEnabled (): Boolean Indicate whether the feature is enabled or not |
public | reset () Reset the feature after being disabled |

## Public Constructors

### public constructor(tf: TableFilter) source

Creates an instance of Paging

#### Override:

Feature#constructor

#### Params:

Name | Type | Attribute | Description
tf | TableFilter |  | TableFilter instance

## Public Members

### public btnFirstPageHtml: String source

First page button HTML

### public btnFirstPageText: String source

First page button text

### public btnLastPageHtml: String source

Last page button HTML

### public btnLastPageText: String source

Last page button text

### public btnNextPageHtml: String source

Next page button HTML

### public btnNextPageText: String source

Next page button text

### public btnPageCssClass: String source

Css class for the paging buttons (previous, next, etc.)

### public btnPrevPageHtml: String source

Previous page button HTML

### public btnPrevPageText: String source

Previous page button text

### public hasPagingBtns: Boolean source

Determines if paging buttons are enabled (default: true)

### public hasResultsPerPage: Boolean source

Determines if results per page is configured

### public initialized: boolean source

#### Override:

Feature#initialized

### public nbPgSpanCssClass: String source

Css class for the span containing total number of pages

### public ofText: String source

Text after page selector drop-down

### public onAfterChangePage: Function source

Callback fired after the page is changed

### public onBeforeChangePage: Function source

Callback fired before the page is changed

### public pageSelectorType: String source

Defines page selector type, two possible values: 'select', 'input'

### public pageText: String source

Text preceeding page selector drop-down

### public pagingLength: Number source

Number of rows contained in a page

### public pagingSlc: DOMElement source

Main select DOM element

### public pagingTgtId: String source

ID of custom container element

### public pgInpCssClass: String source

Css class for the paging input element

### public pgSlcCssClass: String source

Css class for the paging select element

### public resultsPerPage: Array source

Label and values for the results per page select, example of usage: ['Records: ', [10,25,50,100]]

### public resultsPerPageSlc: DOMElement source

Results per page select DOM element

### public resultsPerPageTgtId: String source

ID of custom container element for the results per page selector

### public resultsSlcCssClass: String source

Css class for the results per page select

### public resultsSpanCssClass: String source

Css class for the label preceding results per page select

## Public Methods

### public changePage(index: Number) source

Change the page based on passed index

#### Params:

Name | Type | Attribute | Description
index | Number |  | Index of the page (0-n)

### public changeResultsPerPage(val: String) source

Change the number of results per page based on passed value

#### Params:

Name | Type | Attribute | Description
val | String |  | The number of results per page

### public destroy() source

Remove paging feature

#### Override:

Feature#destroy

### public getPage(): Number source

Return the current page number

#### Return:

Number | Page number

### public groupByPage(validRows: Array) source

Group table rows by page and display valid rows

#### Params:

Name | Type | Attribute | Description
validRows | Array |  | Collection of valid rows

### public init() source

Initialize DOM elements

#### Override:

Feature#init

### public onChangeResultsPerPage() source

Change rows according to page results drop-down

### public removeResultsPerPage() source

Remove number of results per page UI elements

### public reset(filterTable: Boolean) source

Reset paging when filters are already instantiated

#### Override:

Feature#reset

#### Params:

Name | Type | Attribute | Description
filterTable | Boolean |  | Execute filtering once paging instanciated

### public resetPage() source

Re-set page nb at page re-load

### public resetPageLength() source

Re-set page length value at page re-load

### public resetPagingInfo() source

Reset paging info from scratch after a filtering process

### public setPage(cmd: String}/{Number) source

Show page defined by passed argument (string or number):

#### Params:

Name | Type | Attribute | Description
cmd | String}/{Number |  | possible string values: 'next', 'previous', 'last', 'first' or page number as per param

### public setPagingInfo(validRows: Array) source

Calculate number of pages based on valid rows Refresh paging select according to number of pages

#### Params:

Name | Type | Attribute | Description
validRows | Array |  | Collection of valid rows

### public setResultsPerPage() source

Generates UI elements for the number of results per page drop-down