Paginate A Large List Using jQuery Paging Plugin

Paging is a fast and easy-to-use jQuery pagination plugin which dynamically generates pagination links and next/prev buttons to paginate a large HTML list.

How to use it:

1. Include the JavaScript paging.js after jQuery..

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="paging.js"></script>

2. Just attach the function JPaging to the target html list and done.

<ul id="listPage">
  <li>1. li content</li>
  <li>2. li content</li>
  <li>3. li content</li>
  <li>4. li content</li>
  <li>5. li content</li>
  <li>6. li content</li>
  <li>7. li content</li>
  <li>8. li content</li>
  <li>9. li content</li>
  <li>10. li content</li>
</ul>

$(function() {
  $("#listPage").JPaging();
});

3. Apply your own styles to the pagination controls.

#paging {
  padding: 0 20px 20px 20px;
  font-size: 13px;
  margin-top: 10px;
}

#paging a {
  color: #000;
  background: #e0e0e0;
  padding: 8px 12px;
  margin-right: 5px;
  text-decoration: none;
}

#paging a.aktif {
  background: #000 !important;
  color: #fff;
}

#paging a:hover {
  border: 1px solid #000;
}

.hidden {
  display: none;
}

4. Specify the number of list items to show per page. Default: 10.

$(function() {
  $("#listPage").JPaging({
    pageSize: 15
  });
});

5. Specify the number of visible PageSize links. Default: 5.

$(function() {
  $("#listPage").JPaging({
    visiblePageSize: 7
  });
});

---

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