• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Script phân trang cho bảng

10
31/10/2011

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ẻ </head>.

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function Pager(tableName, itemsPerPage) {
  4.     this.tableName = tableName;
  5.     this.itemsPerPage = itemsPerPage;
  6.     this.currentPage = 1;
  7.     this.pages = 0;
  8.     this.inited = false;
  9.    
  10.     this.showRecords = function(from, to) {      
  11.         var rows = document.getElementById(tableName).rows;
  12.         // i starts from 1 to skip table header row
  13.         for (var i = 1; i < rows.length; i++) {
  14.             if (i < from || i > to)
  15.                 rows[i].style.display = 'none';
  16.             else
  17.                 rows[i].style.display = '';
  18.         }
  19.     }
  20.    
  21.     this.showPage = function(pageNumber) {
  22.           if (! this.inited) {
  23.                    alert("not inited");
  24.                    return;
  25.           }
  26.  
  27.         var oldPageAnchor = document.getElementById('pg'+this.currentPage);
  28.         oldPageAnchor.className = 'pg-normal';
  29.        
  30.         this.currentPage = pageNumber;
  31.         var newPageAnchor = document.getElementById('pg'+this.currentPage);
  32.         newPageAnchor.className = 'pg-selected';
  33.        
  34.         var from = (pageNumber - 1) * itemsPerPage + 1;
  35.         var to = from + itemsPerPage - 1;
  36.         this.showRecords(from, to);
  37.     }  
  38.    
  39.     this.prev = function() {
  40.         if (this.currentPage > 1)
  41.             this.showPage(this.currentPage - 1);
  42.     }
  43.    
  44.     this.next = function() {
  45.         if (this.currentPage < this.pages) {
  46.             this.showPage(this.currentPage + 1);
  47.         }
  48.     }                      
  49.    
  50.     this.init = function() {
  51.         var rows = document.getElementById(tableName).rows;
  52.         var records = (rows.length - 1);
  53.         this.pages = Math.ceil(records / itemsPerPage);
  54.         this.inited = true;
  55.     }
  56.  
  57.     this.showPageNav = function(pagerName, positionId) {
  58.           if (! this.inited) {
  59.                    alert("not inited");
  60.                    return;
  61.           }
  62.           var element = document.getElementById(positionId);
  63.          
  64.           var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
  65.         for (var page = 1; page <= this.pages; page++)
  66.             pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
  67.         pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';          
  68.        
  69.         element.innerHTML = pagerHtml;
  70.     }
  71. }
  72. //]]>
  73. </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:

  1. .pg-normal {
  2.        color: red;
  3.        font-weight: normal;
  4.        text-decoration: none;  
  5.        cursor: pointer;  
  6. }
  7. .pg-selected {
  8.        color: black;
  9.        font-weight: bold;      
  10.        text-decoration: underline;
  11.        cursor: pointer;
  12. }

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

  1. <table id="results">
  2.      <tr>
  3.           <th>Heading 1</th>
  4.           <th>Heading 2</th>
  5.           <th>Heading 3</th>
  6.      </tr>
  7.      <tr>
  8.           <td>Column 1 – Row 1</td>
  9.           <td>Column 2 – Row 1</td>
  10.           <td>Column 3 – Row 1</td>
  11.      </tr>
  12.      <tr>
  13.           <td>Column 1 – Row 2</td>
  14.           <td>Column 2 – Row 2</td>
  15.           <td>Column 3 – Row 2</td>
  16.      </tr>
  17.      <tr>
  18.           <td>Column 1 – Row 3</td>
  19.           <td>Column 2 – Row 3</td>
  20.           <td>Column 3 – Row 3</td>
  21.      </tr>
  22.      <tr>
  23.           <td>Column 1 – Row 4</td>
  24.           <td>Column 2 – Row 4</td>
  25.           <td>Column 3 – Row 4</td>
  26.      </tr>
  27.      <tr>
  28.           <td>Column 1 – Row 5</td>
  29.           <td>Column 2 – Row 5</td>
  30.           <td>Column 3 – Row 5</td>
  31.      </tr>
  32.      <tr>
  33.           <td>Column 1 – Row 6</td>
  34.           <td>Column 2 – Row 6</td>
  35.           <td>Column 3 – Row 6</td>
  36.      </tr>
  37.      <tr>
  38.           <td>Column 1 – Row 7</td>
  39.           <td>Column 2 – Row 7</td>
  40.           <td>Column 3 – Row 7</td>
  41.      </tr>
  42.      <tr>
  43.           <td>Column 1 – Row 8</td>
  44.           <td>Column 2 – Row 8</td>
  45.           <td>Column 3 – Row 8</td>
  46.      </tr>
  47.      <tr>
  48.           <td>Column 1 – Row 9</td>
  49.           <td>Column 2 – Row 9</td>
  50.           <td>Column 3 – Row 9</td>
  51.      </tr>
  52. <div id="pageNavPosition"></div>
  53. <script type="text/javascript"><!--
  54.        var pager = new Pager('results', 3);
  55.        pager.init();
  56.        pager.showPageNav('pager', 'pageNavPosition');
  57.        pager.showPage(1);
  58. //--></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.

{10 bình luậnAdd yours ?}

23:40:00, 31 thg 10, 2011

Đang tính đi ngủ đọc bài này xong mừng quá, cái này sẽ sáng tạo ra đc nhiều thứ đây. Hỳ bác Hà mới mở mục âm nhạc, e cũng đang quan tâm đến cái code này, đẹp nhỉ :1)

Reply
23:47:00, 31 thg 10, 2011

@DPMNET Hì tính tạo bộ sưu tập những bài hát kinh điển để ae thưởng thức lúc giải stress sau khi vọc TUT, nghe nhạc xong vọc TUT tiếp ấy mà.

Reply
16:29:00, 1 thg 11, 2011

@Huỳnh Nhật HàNhạc quốc tế nha bác,nhạc Việt hồi này em nghe đếch hỉu gì cả.Không biết do thẩm âm của em kém hay là do ca sĩ hát không "ngon":1) :1) :1) :1) :1)

Reply
10:15:00, 3 thg 11, 2011

Anh hà Ơi Anh Co Nick Yahoo không .Cho em hoi nhờ cái này.nếu anh Online Pm vào Nick em nhé Yahoo.Tinhay9x em đang có việc muốn hoi anh.

Reply
11:13:00, 3 thg 11, 2011

@Admin Có gì hỏi cứ send qua mail nhé. Giai đoạn này chắc đóng Yahoo luôn quá. K có thời gian.

Reply
11:15:00, 3 thg 11, 2011

@ngonluanho.net Nghe nhạc Việt xong bị điếc luôn, ngôn từ sáo rỗng chả hiểu gì hết (nhạc trẻ).

Reply
11:16:00, 3 thg 11, 2011

@ngonluanho.net Giống như mấy câu "Tình yêu đến em không mong đợi gì, tình yêu đi em không hề hối tiếc." nghe nó chả giống người luôn.

Reply
23:51:00, 17 thg 10, 2016

đã từ rất lâu ròi

cách trị mụn

Reply
22:18:00, 8 thg 12, 2016

phải lm sao để con k ốm


cách trị mụn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn