Phân trang cho bài viết sử dụng jQuery

Với sự hỗ trợ của jQuery, việc phân trang ngay trong bài viết giúp cho không gian trong trang web được bố trí hài hòa hơn nhờ thanh Pagination khá giống với phân trang cho cả một website hoặc webblog.

Xem Demo.

Trong thủ thuật này chúng ta cần dùng thẻ <div> để tạo các trang nhỏ và thẻ
để phân bố đều các đoạn văn trong trang nhỏ ấy.

Trước tiết cần đặt phần code CSS và Javascript vào trước thẻ </div>.

<style type='text/css'>
.pagination {
font-size: 80%;
}
.pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
}
.pagination .current {
background: #26B;
color: #fff;
border: solid 1px #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}
#Searchresult {
margin-top:15px;
margin-bottom:15px;
border:solid 1px #eef;
padding:5px;
background:#eef;
width:40%;
}
#Searchresult p { margin-bottom:1.4em;}
</style>
<script type="text/javascript" src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<script type="text/javascript">

// This is a very simple demo that shows how a range of elements can
// be paginated.

/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}

/**
* Callback function for the AJAX content loader.
*/
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
});
}

// Load HTML snippet with AJAX and insert it into the Hiddenresult element
// When the HTML has loaded, call initPagination to paginate the elements
$(document).ready(function(){
initPagination();
});



</script>

* Chú ý: Dòng items_per_page:1, số 1 thể hiện 1 thành phần div trên mỗi trang, bạn có thể đặt 2, 3, 4, ... tùy theo số lượng thành phần div cần hiển thị.

Ở phần nội dung phân trang, thiết lập cấu trúc HTML như sau:

<div id="Pagination"></div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>

<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 1.</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 1.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 2</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 2.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 3</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 3.</p>
</div>
</div>

(Còn cập nhật)