Trước đây hẳn bạn nghe nhiều đến script phân trang cho toàn bộ blog và phân trang cho nội dung trong bài viết, chứ ít khi nghe kiểu phân trang cho bảng. Đôi khi bạn cần phải dùng đến bảng (table) để bố trí nội dung theo nhiều cột và nhiều dòng giống như trong văn bản Microsoft Word. Trong trường hợp nội dung quá nhiều thì bảng sẽ trở nên rất dài, khi đó với script phân trang sẽ giúp bảng trở nên gọn gàng hơn.
Xem Demo
☼ Cách phân trang cho bảng dài trong bài viết của blogspot
Bước 1: Đăng nhập vào Blog → Vào mẫu (template) → Chọn Chỉnh sử HTML (Edit HTML) → Đặt đoạn code sau đây vào trước thẻ </head>.
<script type="text/javascript"> //<![CDATA[ function Pager(tableName, itemsPerPage) { this.tableName = tableName; this.itemsPerPage = itemsPerPage; this.currentPage = 1; this.pages = 0; this.inited = false; this.showRecords = function(from, to) { var rows = document.getElementById(tableName).rows; // i starts from 1 to skip table header row for (var i = 1; i < rows.length; i++) { if (i < from || i > to) rows[i].style.display = 'none'; else rows[i].style.display = ''; } } this.showPage = function(pageNumber) { if (! this.inited) { alert("not inited"); return; } var oldPageAnchor = document.getElementById('pg'+this.currentPage); oldPageAnchor.className = 'pg-normal'; this.currentPage = pageNumber; var newPageAnchor = document.getElementById('pg'+this.currentPage); newPageAnchor.className = 'pg-selected'; var from = (pageNumber - 1) * itemsPerPage + 1; var to = from + itemsPerPage - 1; this.showRecords(from, to); } this.prev = function() { if (this.currentPage > 1) this.showPage(this.currentPage - 1); } this.next = function() { if (this.currentPage < this.pages) { this.showPage(this.currentPage + 1); } } this.init = function() { var rows = document.getElementById(tableName).rows; var records = (rows.length - 1); this.pages = Math.ceil(records / itemsPerPage); this.inited = true; } this.showPageNav = function(pagerName, positionId) { if (! this.inited) { alert("not inited"); return; } var element = document.getElementById(positionId); var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | '; for (var page = 1; page <= this.pages; page++) pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | '; pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; element.innerHTML = pagerHtml; } } //]]> </script>
Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]></b:skin> để định dạng các thuộc tính cho phần phân trang:
.pg-normal { color: red; font-weight: normal; text-decoration: none; cursor: pointer; } .pg-selected { color: black; font-weight: bold; text-decoration: underline; cursor: pointer; }- Lưu Template lại và tiến hành bước tiếp theo.
Bước 3. Khi tạo nội dung trong một bài viết nào đó → Tích vào phần HTML của bài viết → hãy sử dụng cấu trúc HTML cho bảng dưới dạng như sau (ở đây demo bảng có 3 cột và 9 dòng để phân trang thành 3 trang, bạn có thể vận dụng linh hoạt):
<table id="results">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Column 1 – Row 1</td>
<td>Column 2 – Row 1</td>
<td>Column 3 – Row 1</td>
</tr>
<tr>
<td>Column 1 – Row 2</td>
<td>Column 2 – Row 2</td>
<td>Column 3 – Row 2</td>
</tr>
<tr>
<td>Column 1 – Row 3</td>
<td>Column 2 – Row 3</td>
<td>Column 3 – Row 3</td>
</tr>
<tr>
<td>Column 1 – Row 4</td>
<td>Column 2 – Row 4</td>
<td>Column 3 – Row 4</td>
</tr>
<tr>
<td>Column 1 – Row 5</td>
<td>Column 2 – Row 5</td>
<td>Column 3 – Row 5</td>
</tr>
<tr>
<td>Column 1 – Row 6</td>
<td>Column 2 – Row 6</td>
<td>Column 3 – Row 6</td>
</tr>
<tr>
<td>Column 1 – Row 7</td>
<td>Column 2 – Row 7</td>
<td>Column 3 – Row 7</td>
</tr>
<tr>
<td>Column 1 – Row 8</td>
<td>Column 2 – Row 8</td>
<td>Column 3 – Row 8</td>
</tr>
<tr>
<td>Column 1 – Row 9</td>
<td>Column 2 – Row 9</td>
<td>Column 3 – Row 9</td>
</tr>
</table>
<div id="pageNavPosition"></div>
<script type="text/javascript"><!--
var pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>
- Ở đoạn script trên thì số 3 biểu thị số dòng mỗi trang, bạn có thể điều chỉnh tùy theo trường hợp áp dụng của bạn.
Để hỗ trợ thêm mình Upload cho các bạn bằng Video
Chúc thành công!
Theo:Thuthuatblog.
Nhận xét
CHÀO BẠN!
Trả lờiXóaMình cám ơn Bạn đã đăng nhiều thủ thuật hữu ích cho anh em cộng đồng, riêng bài nầy mình rất thích nhưng không hiểu lắm ở bước thứ 3. (cụ thể là khi hoàn thành bước 1 và 2 thì bước ba mặc nhiên sẽ có ở HTML hay phải dán code ở bước ba vào đâu? Mình mới làm bog nên không hiểu gì, mong bạn vui lòng hướng dẫn.
địa chỉ blog: http://vuchithanh.blogspot.com
Cám ơn Bạn.
Nhận xét này đã bị tác giả xóa.
Xóađể áp dụng thử có được không
Xóaanh namkna giỏi cntt thế
Xóa@ Vũ Chí Thanh: Code buwocs 1 và 2 bạn chèn vào Template còn bước 3 bạn chèn vào phần HTML trong bài viết của bạn sau đó chỉnh sửa thông tin cần thiết là Ok:P
Trả lờiXóaChúc thành công!
bạn ơi , mình thực sự không hiểu lắm về cách thứ 3 , cụ thể là chèn vào chỗ nào của phần HTML trong bài viết vậy , hồi âm giúp mình nha
Trả lờiXóa@Trần Tùng Sơn Bạn có thể xem Hướng dẫn Chi tiết bằng VideoTẠI ĐÂY
Trả lờiXóamình đã Update vào bài viết rùi đó
Thanh bạn thật nhiều, tôi đã học từ bạn rất nhiều và biến hóa mới mẽ. Dialongbinhduong.com. Cam ơn.
Trả lờiXóaMình làm tương tự nhưng bảng không hoạt động được. Không biet1 như thế nào
Trả lờiXóaBước 3 khi chèn code vào rồi bạn không nên chuyển qua lại giữa tab Viết và HTML nếu không code sẽ lỗi và không hoạt động nha.
Xóa