【table的基本組成】

       要先實現表格的假分頁，首先要知道table的基本成分：<thead>頭、<tbody>身體、<tfood>腳

<table>
    <thead>    <!-- 頭 -->
        <tr>
            <th></th>
        </tr>
    </thead>

    <tbody>    <!-- 身體 -->
        <tr>
            <td
 
></td>
        </tr>
    </tbody>
    <tfood>    <!-- 腳 -->
        <tr>
            <td></td>
        </tr>
    </tfood>
</table>

【table假分頁】

//user.ts
export class User {
    id: number;
    FirstName: string;
    LastName: string;
    UserName: string
 
;  
  }

//datatable.component.html
<!-- table佈局 -->
<table class="table table-striped table-bordered table-hover table-condensed">
    <thead>
      <tr class="active" >
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th
 
>
          <th>User Name</th>
          <th>操作</th>
      </tr>
    </thead>
    <tbody *ngFor="let user of users,let i=index" >
        <tr class="success" *ngIf="i>=(page-1)*pageSize && i<page*pageSize ">
          <td >{{user.id}}</td>
          <td>{{user.FirstName}}</td>
          <td>{{user.LastName}}</td>
          <td>{{user.UserName}}</td>
          <td><a href="">編輯</a></td>
      </tr>
    </tbody>  
  </table>

<!-- 分頁 -->
  <nav aria-label="Page navigation">
      <ul class="pagination">
        <li><a style="cursor:pointer" (click)="topPage()">首頁</a></li>
        <li><a style="cursor:pointer" (click)="previousPage()">上一頁</a></li>
        <li><a><input #inPage  (keyup.enter)="changePage(inPage.value)"  (blur)="changePage(inPage.value)"  value={{page}} /></a></li>
        <li><a style="cursor:pointer" (click)="nextPage()">下一頁</a></li>
        <li><a style="cursor:pointer" (click)="endPage()">尾頁</a></li>
      </ul>
    </nav>
  </div>

【註釋】

• let i=indexi：代表tbody迴圈的次數，index在誰的標籤裡，就代表迴圈該標籤的次數
• *ngFor為什麼寫在中（寫在中資料顯示不出來），結合以前的程式設計除錯經驗看，我認為：只有走完該條語句時，此句的程式碼才起作用，此時還沒進行迴圈，即i還沒有值，如何判斷i，此問題還有待研究。。。
• <input #inPage (keyup.enter)="changePage(inPage.value)" (blur)="changePage(inPage.value)" value={{page}} />
  
  • #inPage：代表所在標籤，相當於給該標籤起了個別名,以後用到inPage在此就代表<input/>;
  • （blur）:失去焦點觸發的事件
  • (keyup.enter)：回車時觸發的事件

//datatable.component.ts
import { User} from './user';

const Users:User[]=[
  { id: 1, FirstName: 'wang',LastName:'shuang',UserName:'1' },
  { id: 2, FirstName: 'li',LastName:'hua',UserName:'2' },
  { id: 3, FirstName: 'zhao',LastName:'nan',UserName:'3'},
  { id: 4, FirstName: 'niu',LastName:'qian',UserName:'4' },
  { id: 5, FirstName: 'yan',LastName:'wen',UserName:'5' },
  { id: 6, FirstName: 'liu',LastName:'wen',UserName:'6' },
  { id: 7, FirstName: 'bai',LastName:'jing',UserName:'7' },
  { id: 8, FirstName: 'an',LastName:'jing',UserName:'8'},
  { id: 9, FirstName: 'wei',LastName:'yuan',UserName:'9' },
  { id: 10, FirstName: 'kou',LastName:'ru',UserName:'10' },
];
@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})

export class DatatableComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  users = Users;

    total:number=this.users.length ;       //總記錄數
    pageSize:number=5;  //頁的大小，初始值為5
    page:number=1;       //頁號，初始為1
    totalPages:number=this.total/this.pageSize; //總頁數

    @Input() arr: string[] = new Array();  //儲存欄位名

    //上一頁
    previousPage(){
        this.page--;
        this.changePage(this.page);  
    }

    // 下一頁
    nextPage(){
      this.page++;
      this.changePage(this.page);
     }


    // 首頁
    topPage(){
      this.page=1;
    }
    // 尾頁
    endPage(){
      this.page=this.totalPages;  
    }

    // 改變頁號，更新表格所在頁數的資料
    changePage(page:number):void{
      if(page>0 && page<this.totalPages){ //正常之間的
        this.page=page;
        //以防改變頁的大小或總記錄數/頁大小時不為整，出現小數點形式的
        this.totalPages=Math.ceil(this.total/this.pageSize);
      } else if(page <= 0){ //頁號小於首頁
        this.page=1;
      } else { //頁號大於尾頁號
        page=this.totalPages;
        this.page=this.totalPages;
      }
    }
}

【註釋】

• 之所以在改變頁數數，table資料自動重新整理到指定頁書：是因為page等變數是全域性變數，所以page改變時，table自動重新整理
• 每次page的值改變時都會走一遍*ngFor迴圈，*ngIf判斷該條記錄在該頁嗎？比如當page=2時，i=1，此時i不在 5~9之間；此次迴圈結束進入下一次迴圈，i=2.。。。一次判斷，當i=5時，i在5~9之間，第5條記錄將顯示出來
• 當頁數頁數改變時，要判斷是否超出了總的頁數，即changePage()的實現的功能
• 起到假分頁的主要知識點就是：
  
  • *ngFor迴圈：遍歷每條資料（索引，記錄記錄數）
  • **ngIf    判斷：限制顯示的記錄數，即限制哪幾條資料才能顯示到該頁
    最後效果圖：

【總結】

       知識在於積累與探索，雖然現在看起來這個功能實現起來也不是多麼難，但是對於一個小白來說，此過程還是有點坎坷的，加油！