การใช้งาน Angular DataTable With PHP/MySQL

สวัสดีครับ บทความนี้เรายังอยู่ในเรื่องของ Angular ต่อครับ โดยในตอนนี้จะเป็นการแนะนำ การใช้งาน DataTable กับ Angular กันครับ

ในตัวอย่างนี้จะใช้ Angular  DataTables ซึ่งได้มีการ Integrate ระหว่าง Angular และ Plugin DataTable มาให้เรียบร้อยแล้ว

สามารถเข้าไปดูตัวอย่างการใช้งานได้ที่  https://l-lin.github.io/angular-datatables

การติดตั้ง ก่อนอื่นเราต้องติดตั้ง Angular Cli กันก่อน

หากใครติดตั้งแล้ว สามารถ ข้ามขั้นตอนนี้ไปได้ครับ

npm install -g @angular/cli

ตัวอย่าง เราจะสร้าง Project ด้วยคำสั่ง  ng new datatable

ng new datatable

จากนั้นเราจะมาติดตั้ง npm dependencies เพิ่มเติมดังนี้

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

เมื่อติดตั้งเรียบร้อยให้เปิดไปที่ Project เราครับ และ เปิดไฟล์ angular.json เพื่อตั้งค่าเพิ่มเติมครับ
ตัวอย่างสร้างไว้ที่ D:/angular/datatable/angular.json เพิ่ม Code ดังภาพ

"styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],

ต่อมาเรามาแก้ไขในส่วนของไฟล์  app.module.ts กันครับ

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { DataTablesModule } from 'angular-datatables';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


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

เริ่มใช้งาน Angular DataTable

ในตัวอย่างแรกนี้จะเป็นการดึงข้อมูลจาก API  https://jsonplaceholder.typicode.com/posts
โดยจะเป็นการดึงข้อมูลมาทั้งหมดแล้วค่อยนำมาแสดง ในตาราง Datatable

แก้ไขในส่วนของ Component กันก่อน ไปที่ไฟล์ app.component.ts
ตัวอย่างสร้างไฟล์ไว้ที่ D:/angular/datatable/src/app/app.component.ts
แก้ไขไฟล์ดังนี้

import { Component,OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  url : string = "https://jsonplaceholder.typicode.com/posts";
  
  data : any = [];

  constructor(private http : HttpClient) { }

  ngOnInit() {
    
    this.http.get(this.url).subscribe((res) => {
        this.data = res;
    });
    
  }

}

แก้ไขในส่วนของ View ไปที่ ไฟล์ app.component.html
ตัวอย่างสร้างไฟล์ไว้ที่ D:/angular/datatable/src/app/app.component.html
แก้ไขไฟล์ดังนี้

<router-outlet></router-outlet>
<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let d of data">
          <td>{{d.id}}</td>
          <td>{{d.title}}</td>
          <td>{{d.body}}</td>
      </tr>
  </tbody>
</table>

เมื่อลอง ใช้คำสั้ง  ng serve เพื่อรัน Server ไปที่ URL : http://localhost:4200 หากไม่มีอะไรผิดพลาดจะแสดงหน้าจอดังนี้

การใช้งาน Angular Server side the Angular way

ตัวอย่างต่อไปจะเป็นการเรียกใช้งานแบบ Server side the Angular way คือการดึงข้อมูลจาก Server มาแสดงทีละหน้า เหมาะสำหรับ กรณีที่มีข้อมูลใน Database เป็นจำนวนมาก ไม่สามารถ Load ทั้งหมดก่อนแล้วค่อยมาแสดงแบบในตัวอย่างแรกได้

ในตัวอย่างนี้เราจะสร้าง API ไว้ใช้เองครับ สร้าง Database ชื่อ users_database และ สร้างตาราง employees ดังนี้

CREATE DATABASE users_database;

CREATE TABLE `employees` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) CHARACTER SET latin1 DEFAULT NULL,
  `last_name` varchar(255) CHARACTER SET latin1 DEFAULT NULL,
  `email_address` varchar(255) CHARACTER SET latin1 DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

จากนั้นใส่ข้อมูลตัวอย่างดังนี้ครับ

insert into employees (id, first_name, last_name, email_address) values (1, 'Thorny', 'Capstack', 'tcapstack0@wikia.com');
insert into employees (id, first_name, last_name, email_address) values (2, 'Deedee', 'Dellenbach', 'ddellenbach1@mac.com');
insert into employees (id, first_name, last_name, email_address) values (3, 'Allison', 'Tench', 'atench2@google.ru');
insert into employees (id, first_name, last_name, email_address) values (4, 'Bruce', 'Semkins', 'bsemkins3@ocn.ne.jp');
insert into employees (id, first_name, last_name, email_address) values (5, 'Simon', 'Allerton', 'sallerton4@ezinearticles.com');
insert into employees (id, first_name, last_name, email_address) values (6, 'Molly', 'Begwell', 'mbegwell5@shop-pro.jp');
insert into employees (id, first_name, last_name, email_address) values (7, 'Andria', 'Bracknell', 'abracknell6@naver.com');
insert into employees (id, first_name, last_name, email_address) values (8, 'Beryle', 'Manlow', 'bmanlow7@youku.com');
insert into employees (id, first_name, last_name, email_address) values (9, 'Jeanna', 'Shimmin', 'jshimmin8@reference.com');
insert into employees (id, first_name, last_name, email_address) values (10, 'Jordanna', 'Weddeburn - Scrimgeour', 'jweddeburnscrimgeour9@themeforest.net');
insert into employees (id, first_name, last_name, email_address) values (11, 'Meredeth', 'Jermyn', 'mjermyna@hc360.com');
insert into employees (id, first_name, last_name, email_address) values (12, 'Cori', 'McChesney', 'cmcchesneyb@jalbum.net');
insert into employees (id, first_name, last_name, email_address) values (13, 'Cyndi', 'Northover', 'cnorthoverc@mysql.com');
insert into employees (id, first_name, last_name, email_address) values (14, 'Caryn', 'Ianittello', 'cianittellod@ebay.co.uk');
insert into employees (id, first_name, last_name, email_address) values (15, 'Alfonso', 'Crielly', 'acriellye@elpais.com');
insert into employees (id, first_name, last_name, email_address) values (16, 'Erda', 'Martschik', 'emartschikf@bluehost.com');
insert into employees (id, first_name, last_name, email_address) values (17, 'Jess', 'Duesberry', 'jduesberryg@opensource.org');
insert into employees (id, first_name, last_name, email_address) values (18, 'Andres', 'Aitkenhead', 'aaitkenheadh@nasa.gov');
insert into employees (id, first_name, last_name, email_address) values (19, 'Prentice', 'Blackston', 'pblackstoni@jigsy.com');
insert into employees (id, first_name, last_name, email_address) values (20, 'Federica', 'Donaghy', 'fdonaghyj@sciencedirect.com');
insert into employees (id, first_name, last_name, email_address) values (21, 'Florella', 'Morling', 'fmorlingk@theguardian.com');
insert into employees (id, first_name, last_name, email_address) values (22, 'Madge', 'Bowstead', 'mbowsteadl@seesaa.net');
insert into employees (id, first_name, last_name, email_address) values (23, 'Anita', 'Briddle', 'abriddlem@addthis.com');
insert into employees (id, first_name, last_name, email_address) values (24, 'Ainslee', 'Emburey', 'aembureyn@blog.com');
insert into employees (id, first_name, last_name, email_address) values (25, 'Melly', 'Lamburn', 'mlamburno@ezinearticles.com');
insert into employees (id, first_name, last_name, email_address) values (26, 'Dillie', 'Charrett', 'dcharrettp@hao123.com');
insert into employees (id, first_name, last_name, email_address) values (27, 'Grant', 'Penquet', 'gpenquetq@imageshack.us');
insert into employees (id, first_name, last_name, email_address) values (28, 'Vevay', 'Cutmare', 'vcutmarer@google.pl');
insert into employees (id, first_name, last_name, email_address) values (29, 'Joseph', 'Oughtright', 'joughtrights@tripod.com');
insert into employees (id, first_name, last_name, email_address) values (30, 'Noak', 'Giaomozzo', 'ngiaomozzot@flickr.com');
insert into employees (id, first_name, last_name, email_address) values (31, 'Sharona', 'Walshaw', 'swalshawu@adobe.com');
insert into employees (id, first_name, last_name, email_address) values (32, 'Munmro', 'Abbe', 'mabbev@ca.gov');
insert into employees (id, first_name, last_name, email_address) values (33, 'Zeke', 'Beall', 'zbeallw@taobao.com');
insert into employees (id, first_name, last_name, email_address) values (34, 'Katleen', 'Norgan', 'knorganx@skyrock.com');
insert into employees (id, first_name, last_name, email_address) values (35, 'Sydelle', 'Schoffler', 'sschofflery@lycos.com');
insert into employees (id, first_name, last_name, email_address) values (36, 'Mel', 'Vear', 'mvearz@psu.edu');
insert into employees (id, first_name, last_name, email_address) values (37, 'Standford', 'Byk', 'sbyk10@va.gov');
insert into employees (id, first_name, last_name, email_address) values (38, 'Cathi', 'Themann', 'cthemann11@deviantart.com');
insert into employees (id, first_name, last_name, email_address) values (39, 'Lisetta', 'McKeighan', 'lmckeighan12@home.pl');
insert into employees (id, first_name, last_name, email_address) values (40, 'Gillian', 'Gilliard', 'ggilliard13@dell.com');
insert into employees (id, first_name, last_name, email_address) values (41, 'Goraud', 'Wallas', 'gwallas14@angelfire.com');
insert into employees (id, first_name, last_name, email_address) values (42, 'Roch', 'Whellans', 'rwhellans15@hexun.com');
insert into employees (id, first_name, last_name, email_address) values (43, 'Filip', 'Habercham', 'fhabercham16@noaa.gov');
insert into employees (id, first_name, last_name, email_address) values (44, 'Clarie', 'Edmondson', 'cedmondson17@bigcartel.com');
insert into employees (id, first_name, last_name, email_address) values (45, 'Ty', 'Gamil', 'tgamil18@arizona.edu');
insert into employees (id, first_name, last_name, email_address) values (46, 'Zsazsa', 'Copcott', 'zcopcott19@linkedin.com');
insert into employees (id, first_name, last_name, email_address) values (47, 'Rhea', 'Gorusso', 'rgorusso1a@bloglovin.com');
insert into employees (id, first_name, last_name, email_address) values (48, 'Morena', 'Yarker', 'myarker1b@earthlink.net');
insert into employees (id, first_name, last_name, email_address) values (49, 'Perkin', 'Moyse', 'pmoyse1c@stumbleupon.com');
insert into employees (id, first_name, last_name, email_address) values (50, 'Henry', 'Simonnet', 'hsimonnet1d@arstechnica.com');

ในส่วนของ Code Api เราจะใช้ PHP ในการดึงข้อมูลจาก MySQL มาแสดง โดยจะมีการรับค่า ตัวแปร Start เพื่อแสดงข้อมูลทีละหน้าครับ ตัวอย่างไฟล์ employees.php

<?php
	header("Access-Control-Allow-Origin: *");
	
	header("Content-Type: application/json; charset=UTF-8");
	
	header("Access-Control-Allow-Methods: OPTIONS,GET,POST,PUT,DELETE");
	
	header("Access-Control-Max-Age: 3600");
	
	header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
	
	$link = mysqli_connect('localhost', 'root', '', 'users_database');

	mysqli_set_charset($link, 'utf8');
	
	if (isset($_GET['start'])) {
		$pageno = $_GET['start'];
	} else {
		$pageno = 1;
	}
	
	$no_per_page = 10;
    
	$offset = $pageno;
	
	$totalsql = "SELECT COUNT(*) FROM employees";
	$result = mysqli_query($link,$totalsql);
	$total_rows = mysqli_fetch_array($result)[0];

	$sql = "SELECT * FROM employees LIMIT $offset, $no_per_page";
		
	$result = mysqli_query($link, $sql);
		
	$arr = array();
		
	while ($row = mysqli_fetch_assoc($result)) {
		 
		 $arr[] = $row;
	}
	
	$data_result = [
		'recordsTotal' => $total_rows,
		'recordsFiltered' => $total_rows,
		'start' => $offset,
		'data' => $arr
	];
		
	echo json_encode($data_result);

เมื่อเรียกใช้งานจะแสดงข้อมูลดังภาพ

จากนั้นเรามาแก้ไขในส่วนของ Angular กันต่อไปที่ app.component.ts แก้ไข Code ดังนี้

import { Component,OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';

class Person {
  id : string;
  first_name : string;
  last_name : string;
  email_address : string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

      dtOptions: DataTables.Settings = {};

      persons: Person[];

      constructor(private http: HttpClient) { }

      ngOnInit(): void {

        const that = this;

        this.dtOptions = {
          pagingType: 'full_numbers',
          pageLength: 10,
          ordering : false,
          searching : false,
          lengthChange : false,
          serverSide: true,
          processing: true,
          ajax: (dataTablesParameters: any, callback) => {

            that.http
              .get<DataTablesResponse>(
                'http://localhost/api/employees.php?start=' + dataTablesParameters.start
              ).subscribe(resp => {

                that.persons = resp.data;

                callback({
                  recordsTotal: resp.recordsTotal,
                  recordsFiltered: resp.recordsFiltered,
                  start : dataTablesParameters.start,
                  data: []
                });

              });
              
          },
          columns: [{ data: 'id' }, { data: 'first_name' }, { data: 'last_name' },{data : 'email_address'}]
        };

      }
}

แก้ไขในส่วนของ View  ที่ไฟล์ app.component.html

<router-outlet></router-outlet>

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody *ngIf="persons?.length != 0">
      <tr *ngFor="let person of persons">
          <td>{{ person.id }}</td>
          <td>{{ person.first_name }}</td>
          <td>{{ person.last_name }}</td>
          <td>{{ person.email_address }}</td>
      </tr>
  </tbody>
</table>

สุดท้ายแก้ไข CSS ที่ไฟล์ src/app/styles.css
ตัวอย่างแก้ไขที่ D:/angular/datatable/src/app/styles.css
แก้ไข Code css ดังนี้

/* You can add global styles to this file, and also import other style files */
.dataTables_empty {
    display: none;
}

จากนั้นลอง Run Server อีกครั้งด้วย คำสั่ง  ng serve หากไม่มีอะไรผิดพลาดจะแสดงตัวอย่างดังภาพ

การทำงานของ Datatable ในตัวอย่างนี้จะทำการดึงข้อมูลจาก API มาแสดงทีละ 1 หน้าครับ

ขอขอบคุณข้อมูลจาก

https://jsonplaceholder.typicode.com

https://l-lin.github.io/angular-datatables

https://www.myprogrammingtutorials.com/create-pagination-with-php-and-mysql.html