การติดตั้งและใช้งาน Datatables ร่วมกับ Angular

DataTables คือ plugin สำหรับจัดการข้อมูลที่มาในรูปแบบตารางให้มีลักษณะพิเศษขึ้น คือ จะทำให้เราสามารถ ค้นหา (Search), เรียงลำดับ (Sort),  แบ่งหน้า (Pagination) ให้กับข้อมูลที่อยู่ในตาราง html ธรรมดาของเราได้อย่างง่ายดาย และดูน่าใช้งาน ซึ่งเจ้า DataTables จะมาพร้อมกับ css framework อย่าง bootstrap ให้เราเลือกใช้งานทุกเวอร์ชันอีกด้วย มาเริ่มติดตั้งใช้งานกับ Angular กันเลยครับ

เริ่มจากติดตั้ง โดยใช้คำสั่ง

ng add angular-datatables

เมื่อติดตั้งเสร็จแล้ว ให้ตรวจสอบไฟล์ app.module.ts ว่ามีการ import DataTablesModule มาหรือยัง ถ้ายังก็ import มาเองเลย ให้ได้ตามนี้

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { DataTablesModule } from "angular-datatables";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

เพียงเท่านี้ก็สามารถเรียกใช้งานได้แล้วครับ มาลองกันเลย

1. สร้าง component ใหม่ ชื่อว่า ZeroConfig ซึ่งจะได้โค้ดดังนี้

import { Component } from '@angular/core';

@Component({
  selector: 'app-zero-config',
  templateUrl: 'zero-config.component.html'
})
export class ZeroConfigComponent {}

2. ในส่วนของหน้า html ใน component นี้ก็ใส่โค้ดดังนี้

<table datatable class="table table-bordered row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Iamout</td>
      <td>Ofinspiration</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yoda</td>
      <td>Skywalker</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Patrick</td>
      <td>Dupont</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Barack</td>
      <td>Obama</td>
    </tr>
    <tr>
      <td>7</td>
      <td>François</td>
      <td>Holland</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Michel</td>
      <td>Popo</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Chuck</td>
      <td>Norris</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Simon</td>
      <td>Robin</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Louis</td>
      <td>Lin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Zelda</td>
      <td>Link</td>
    </tr>
  </tbody>
</table>

3. ลอง run component นี้ดูก็จะพบว่า datatables ทำงานได้แล้วครับ ตามภาพ

ลองปรับใช้ดูนะครับ รายละเอียดเพิ่มเติม ดูที่นี่ https://l-lin.github.io/angular-datatables