This is the continuation of PART 5

Subscribe my channel on YouTube.

Follow me On Medium

Previous Parts:

Part 1 — Zero Configuration

Part 2 — Future enable / disable (settings)

Part 3 — Multiple Tables

Part 4 — Hidden Columns

Hello, a lot of requests comes from my YouTube channel follower to create this tutorial. Already I created a video tutorial in angular 4. I have used set timeout method for displaying table after data loads. we have faced a lot of issues in that approach.

I have decided to overcome this in this tutorial. I have found an alternate solution to this issue. please follow this tutorial.

I used PHP for backend services.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "school";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT *FROM countries";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$rows[] = $row;
}
} else {
echo "0 results";
}
echo json_encode(array('data'=>$rows));
$conn->close();
?>

the SQL query get the data from MySQL table

$sql = "SELECT *FROM countries";

You may use your own query in this section.
I want to convert that result into JSON data

echo json_encode(array('data'=>$rows));

and your JSON result must like the following

{
"data": [{
"id": "1",
"language": "",
"iso2": "AF",
"short_name": "Afghanistan",
"long_name": "Islamic Republic of Afghanistan",
"iso3": "AFG",
"numcode": "004",
"un_member": "yes",
"calling_code": "93",
"cctld": ".af",
"created_at": null,
"modified_at": "0000-00-00 00:00:00",
"created_by": "0",
"modified_by": "0"
}]
}

your result data array must inside of the “data” array.

next, move on to angular part.

Your app component template should like this.

app.component.html

<table #dataTable class="display" style="width:100%">
</table>

here I used the template reference variable for accessing DOM element.

#dataTable

Next, your app component class file should like this.

import {Component, ViewChild, OnInit} from '@angular/core';
declare var $;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
@ViewChild('dataTable') table;
dataTable: any;
dtOptions: any;
constructor(){
}

ngOnInit(): void {
this.dtOptions = {
"ajax": {
url: 'http://localhost/country/country.php',
type: 'POST',
data: {'id': 1, 'name': 'sathish'}
},
columns: [
{
title: 'Short Name',
data: 'short_name'
},
{
title: 'Long Name',
data: 'long_name'
},
{
title: 'ISO 3',
data: 'iso3'
},
{
title: 'ISO 2',
data: 'iso2'
}
]
};
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
}
}

Declare $ property globally. it used to initialize jQuery typings in component class.

declare var $;

ViewChild() decorator used for referring template reference variable inside of the component class.

@ViewChild('dataTable') table;

Next, I want to configure data table setting. first I need to configure ajax option for loading data source.

"ajax": {
url: 'http://localhost/country/country.php',
type: 'POST',
data: {'id': 1, 'name': 'sathish'}
}

then, configure columns option for defining data columns

columns: [
{
title: 'Short Name', //for name of the column
data: 'short_name' // for data source
}
]

once the data source loaded it render the columns in the component template section

the final settings like this

this.dtOptions = {
"ajax": {
url: 'http://localhost/country/country.php',
type: 'POST',
data: {'id': 1, 'name': 'sathish'}
},
columns: [
{
title: 'Short Name',
data: 'short_name'
},
{
title: 'Long Name',
data: 'long_name'
},
{
title: 'ISO 3',
data: 'iso3'
},
{
title: 'ISO 2',
data: 'iso2'
}
]
};

now, i want configure template reference element as a jquery accessible element.

this.dataTable = $(this.table.nativeElement);

finally initialized the data table using the following code.

this.dataTable.DataTable(this.dtOptions);

Previous Part | Next Part

Subscribe my channel on YouTube.