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ị..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>
Ở 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)
<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>
{ 0 comments... read them below or add one }
Post a Comment