69 lines
1.9 KiB
Markdown
69 lines
1.9 KiB
Markdown
# HTML pagination
|
|
|
|
|
|
|
|
It is a plugin for HTML document pagination to fit fixed-sized container. This operation is rather time-consuming, so, please, use this module carefully.
|
|
|
|
## How-to
|
|
|
|
In a browser environment import `HTMLPagination` class and create it's instance:
|
|
|
|
```js
|
|
import { HTMLPagination } from 'html-pagination';
|
|
|
|
const pg = new HTMLPagination(
|
|
document.getElementById('content'), // HTML element with html content you want to paginate in it
|
|
document.getElementById('container'), // HTML element which will display page content. It must add scrollbar on overflow
|
|
100 // Initial number of characters per page. Good value will increase speed of first page computation
|
|
);
|
|
```
|
|
|
|
It will compute text and html elements positions for future use, so you have to run it after you added html content to element with `content` id.
|
|
|
|
Below you can see a common HTML+CSS implementation for `#content` and `#container` elements
|
|
|
|
HTML:
|
|
|
|
```html
|
|
<div id="content">
|
|
<!-- HTML content -->
|
|
</div>
|
|
<div class="appContainer">
|
|
<div id="container"></div>
|
|
</div>
|
|
```
|
|
|
|
CSS:
|
|
|
|
```css
|
|
#content {
|
|
display: none;
|
|
}
|
|
.appContainer {
|
|
height: 300px;
|
|
width: 300px;
|
|
display: flex;
|
|
}
|
|
#container {
|
|
overflow: auto;
|
|
}
|
|
```
|
|
|
|
To display a page you must run HTMLPagination's method `getPage` with page number as argument (numeration starts from 1)
|
|
|
|
```js
|
|
const str = pg.getPage(5); // Displays page number 5 or last one if pages is not enough
|
|
```
|
|
|
|
There is no way to accurately display number of pages untill they all are computed. But you can still get estimated pages number based on `initialJump`. It is adjusted dynamically while pages computing, so, it will change over time.
|
|
|
|
```js
|
|
console.log(pg.pagesNumber);
|
|
```
|
|
|
|
You can also get current number of computed pages with the following property
|
|
|
|
```js
|
|
console.log(pg.computedPagesNumber);
|
|
```
|