Tạo phân trang cho bài viết dài sử dụng jQuery

Ở bài viết này mình sẽ hướng dẫn làm cách nào để tạo phân trang cho bài viết dài sử dụng jQuery. Các bạn hãy thực hiện theo các bước hướng dẫn đơn giản bên dưới.

Demo

Sử dụng js sau

Bạn có thể chèn đoạn js bên dưới vào trong thẻ heal ở template hoặc chèn trực tiếp vào bài viết đều được

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0Bz_65BAr9KCZNnhSNENYR0Y2UlE/"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("div.holder").jPages({
     containerID : "content",
     perPage: 5
   });
});

</script>

Như trên mình thiết lập giá trị perPage là 5, vì vậy trong 1 trang sẽ có 5 mục (5 item)

Soạn thảo bài viết để phân trang

Bạn soạn thảo bài viết theo cấu trúc sau

<div class="holder"></div>
<ul id="content">
 <li><span>Item 1</span></li>
 <li><span>Item 2</span></li>
 <li><span>Item 3</span></li>
 <li><span>Item 4</span></li>
 <li><span>Item 5</span></li>
 <li><span>Item 6</span></li>
 <li><span>Item 7</span></li>
 <li><span>Item 8</span></li>
 <li><span>Item 9</span></li>
</ul>

Ví dụ như code trên sẽ được tự động phân làm 2 trang. Trang thứ nhất gồm Item 1 đến 5, trang thứ 2 gồm Item 6 đến 9.

Thêm style cho phân trang

<style>
.holder{margin: 5px 0;}
.holder a {font-size: 12px;  cursor: pointer;  padding: 2px 5px;  color: #333;}
.holder a:hover {  background-color: #066;  color: #fff;}
.holder a.jp-current,.post-body a.jp-current:hover { color: #ed4e2a; font-weight: bold;}
.holder a.jp-disabled,.post-body a.jp-disabled:hover { color: #999; }
.holder a.jp-current,.post-body a.jp-current:hover,
.holder a.jp-disabled,.post-body a.jp-disabled:hover {  cursor: default;   background: none;}
.holder span { margin: 0 5px; }
table {background: #066;margin-bottom: 10px;color: #066;border: 5px solid #066;max-width: 300px;}
table:hover{color: #fff}
</style>

Có gì không hiểu các bạn cứ để lại comment tại bài viết này mình sẽ giải thích. Chúc các bạn thành công!

Tham khảo từ akshitsethi