Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

19xStudio Script phân trang cho bảng on 27/02/12, 01:13 pm


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

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.

DEMO

Để phân trang cho bảng như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ .
Code:


[list=1]
[*]
<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>
[/list]
Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]> để định dạng các thuộc tính cho phần phân trang:
Code:


[list=1]
[*]
.pg-normal {
[*]
      color: red;
[*]
      font-weight: normal;
[*]
      text-decoration: none; 
[*]
      cursor: pointer; 
[*]
}
[*]
.pg-selected {
[*]
      color: black;
[*]
      font-weight: bold;     
[*]
      text-decoration: underline;
[*]
      cursor: pointer;
[*]
}
[/list]
Lưu Template.

Bước 3. Khi tạo nội dung trong một bài viết nào đó, 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):


Code:
<li class="li1">
<[url=http://december.com/html/4/element/table.html]table[/url] id="results"></li>

  • <tr>

  • <th>Heading 1th>

  • <th>Heading 2th>

  • <th>Heading 3th>

  • tr>

  • <tr>

  • <td>Column 1 – Row 1td>

  • <td>Column 2 – Row 1td>

  • <td>Column 3 – Row 1td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 2td>

  • <td>Column 2 – Row 2td>

  • <td>Column 3 – Row 2td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 3td>

  • <td>Column 2 – Row 3td>

  • <td>Column 3 – Row 3td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 4td>

  • <td>Column 2 – Row 4td>

  • <td>Column 3 – Row 4td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 5td>

  • <td>Column 2 – Row 5td>

  • <td>Column 3 – Row 5td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 6td>

  • <td>Column 2 – Row 6td>

  • <td>Column 3 – Row 6td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 7td>

  • <td>Column 2 – Row 7td>

  • <td>Column 3 – Row 7td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 8td>

  • <td>Column 2 – Row 8td>

  • <td>Column 3 – Row 8td>

  • tr>

  • <tr>

  • <td>Column 1 – Row 9td>

  • <td>Column 2 – Row 9td>

  • <td>Column 3 – Row 9td>

  • tr>

  • table>

  • <div id="pageNavPosition">div>


  • <script type="text/javascript">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ãy xây dựng diễn đàn cùng [KiNg]_[PiN]-BB bạn nhé !!!


    Admin không phải cái gì cũng biết
    Admin chỉ mở ra một cộng đồng để những người hiểu biết và mới biết, trao đổi học tập !
    Mong Các bạn đừng đánh giá hay nói bất cứ một lời lẽ nào khích tướng OK...

    Không Hay Đừng Nói Lời Cay Đắng

    [*]Diễn đàn đẹp nhất với trình duyệt web Mozilla Firefox
    [*]Còn với mấy loại còn lại chắc là thuộc dang diễn đàn tồi nhất !!!
    Xem lý lịch thành viên http://a1k44.thptbatbat.com
    Loading

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

    Permissions in this forum:
    Bạn không có quyền trả lời bài viết

     
    • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Free blog
    © 2012 A1K44BB
    FM PunBB - Edit by HOàng Hải