Convenient Pagination Component For Dynamic Content - motypager

File Size: 11.8 KB
Views Total: 2535
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Convenient Pagination Component For Dynamic Content - motypager

motypager is a small jQuery plugin used to generate a convenient, mobile-friendly pagination control for dynamic content defined in a JavaScript array.

Cross browser, fully customizable and easy to style using your own CSS.

How to use it:

1. Add the stylesheet motypager.css, JavaScript motypager.js to the webpage.

<link rel="stylesheet" href="motypager.css">
<script src="" 
<script src="motypager.min.js"></script>

2. Create a DIV element to holder the pagination control.

<div id="placeholder"></div>

3. Prepare your data to paginate.

var myData = ["JavaScript", "Swift", "Python", "Java", "C++", "Ruby", "Rust", "Elixir", "Scala", "PHP"];

4. Generate a default pagination control inside the placeholder element.


5. Replace the pagination links with select options. Suitable for mobile devices.

  pc_style: false

6. Specify the number of pagination links. Default: 7.

  pages_shown: 10

7. Disable the page refresh when the page changes. Default: false.

  norefresh: true

8. Customize the pagination controls.

  color: "#787d82",
  disabled_color: "#c8cdd2",
  hover_color: "#ec1500",
  cur_bgcolor: "#ec1500",
  cur_color: "#fff",

  first: true,
  last: true,
  prev: true,
  next: true,
  hide_when_only_one: true,

  first_text: "First",
  last_text: "Last",
  prev_text: "Prev",
  next_text: "Next"

9. Callback functions available.

  // for norefresh: false
  url: function(index) {
    return "index_" + index;

  // for norefresh: true
  clicked: function(index, update) {

10. Goto a specific page manually.

// page 8
$("#placeholder").motypager("pageTo", 8);

This awesome jQuery plugin is developed by liujian619. For more Advanced Usages, please check the demo page or visit the official website.