Tạo phân trang cho bảng trên blog

Đăng bởi Admin | 6/7/13 | 0 nhận xét

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.

Để 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ẻ </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"> &#171 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 &#187;</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.

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):



<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!
Xem thêm:

Theo:Thuthuatblog- Namkna

Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

6/7/13