Simple JavaScript Pagination｜How to Use mam-pagination.js with Examples

Japanese

Simple JavaScript Pagination｜How to Use mam-pagination.js with Examples

Want to implement pagination in JavaScript but don’t want to write complicated code? Then mam-pagination.js is perfect for you!
This article explains how to set up simple pagination step by step.

Download mam-pagination.js (6KB)
Click the button above to download mam-pagination.js.
In the file where you want to use mam-pagination, include the script like this:
```
  <script src="./js/mam-pagination.js"></script>
```
You can specify either a relative or absolute path.
At the location where you want to use it, add the class mamPagination to a DIV element, and insert as many child DIVs as the number of pages you want to display.

<div class="mamPagination">
  <div>
    This is page 1.
    You can insert any tags or text here.
  </div>
  <div>
    This is page 2.
    You can insert any tags or text here.
  </div>
</div>

Usage Example and Source Code

Page 1

You can place any content here.
Images can also be inserted.
This is the first page.

Page 2

You can place any content here.
Images can also be inserted.

Page 3

You can place any content here.
Images can also be inserted.
This is the last page.

<script src="./js/mam-pagination.js"></script>
<div class="mamPagination">
  <div>
    <h4>Page 1</h4>
    <p>
      You can place any content here.<br>
      Images can also be inserted.<br>
      This is the first page.
    </p>
    <img src="./imgs/car3.jpg" style="width:200px;height:auto;" width="600" height="400">
    <img src="./imgs/c001s.jpg" style="width:200px;height:auto;" width="640" height="480">
  </div>
  <div>
    <h4>Page 2</h4>
    <p>
      You can place any content here.<br>
      Images can also be inserted.
    </p>
    <img src="./imgs/car2.jpg" style="width:200px;height:auto;" width="600" height="400">
  </div>
  <div>
    <h4>Page 3</h4>
    <p>
      You can place any content here.<br>
      Images can also be inserted.<br>
      This is the last page.
    </p>
    <img src="./imgs/car1.jpg" style="width:200px;height:auto;" width="600" height="400">
  </div>
</div>