<div class="card">
<form class="table-responsive theme-scroollbar">
<div class="card-body">
<div class="card-header">
<h3>Individual column searching (text inputs) </h3><span>The searching functionality provided by
DataTables is useful for quickly search through the information in the table - however the search is
global,
and you may wish to present controls that search on specific columns.</span>
</div>
<div class="dataTables_wrapper">
<div class="d-flex justify-content-between p-2">
<div class="dataTables_length" id="basic-6_length">
<label>Show
<select name="pageSize" [(ngModel)]="service.pageSize">
<option [ngValue]="10">10</option>
<option [ngValue]="15">15</option>
<option [ngValue]="20">20</option>
<option [ngValue]="25">25</option>
</select> entries
</label>
</div>
<div class="mb-3 row">
<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Search:</label>
<div class="col-xs-3 col-sm-auto">
<input id="table-complete-search" type="text" class="form-control" name="searchTerm"
[(ngModel)]="service.searchTerm" autocomplete="off" />
</div>
@if(service.loading$ | async){
<span class="col col-form-label">Loading...</span>
}
</div>
</div>
<table class="display table table-striped table-hover table-light">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
<th scope="col" sortable="position" (sort)="onSort($event)">Position</th>
<th scope="col" sortable="salary" (sort)="onSort($event)">Salary</th>
<th scope="col" sortable="office" (sort)="onSort($event)">Office</th>
<th scope="col" sortable="extn" (sort)="onSort($event)">Extn</th>
<th scope="col" sortable="email" (sort)="onSort($event)">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@for(data of tableData$ | async; track data; let i = $index){
<tr>
<th scope="row">{{ i + 1 + ((service.page - 1) * service.pageSize)}}</th>
<td>
<ngb-highlight [result]="data.name" [term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ngb-highlight [result]="data.position" [term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ngb-highlight [result]="data.salary|number"
[term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ngb-highlight [result]="data.office" [term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ngb-highlight [result]="data.extn|number" [term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ngb-highlight [result]="data.email" [term]="service.searchTerm"></ngb-highlight>
</td>
<td>
<ul class="action">
<i class="fa fa-eye font-primary pe-2"></i>
<i class="icofont icofont-close-circled font-danger ps-2"></i>
</ul>
</td>
</tr>
}
@empty{
<tr class="odd">
<td colspan="10" class="dataTables_empty" style="text-align: center;">
<div class="search-not-found text-center">
<p>No matching records found0</p>
</div>
</td>
</tr>
}
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination class="ms-3" [collectionSize]="( total$ | async)!" [(page)]="service.page"
[pageSize]="service.pageSize">
</ngb-pagination>
</div>
</div>
</div>
</form>
</div>
import { Component, QueryList, ViewChildren } from '@angular/core';
import { CommonModule, DecimalPipe } from '@angular/common';
import { Observable } from 'rxjs';
import { TableService } from '../../../shared/services/table.service';
import { supportDB } from '../../../shared/interface/support';
import { NgbdSortableHeader, SortEvent } from '../../../shared/directives/sortable.directive';
import { SUPPORTDB } from '../../../shared/data/table/SupportTdb';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-data-table',
imports: [CommonModule, FormsModule, NgbdSortableHeader, ReactiveFormsModule, NgbModule],
templateUrl: './data-table.html',
styleUrl: './data-table.scss',
providers: [TableService, DecimalPipe],
})
export class DataTable {
public tableData$: Observable;
public Data: supportDB[];
public total$: Observable;
@ViewChildren(NgbdSortableHeader) headers: QueryList;
constructor(public service: TableService) {
this.tableData$ = service.supportdata$;
this.total$ = service.total$;
}
ngOnInit() {
this.tableData$.subscribe((res) => {
this.Data = res;
});
}
onSort({ column, direction }: SortEvent) {
this.headers.forEach((header) => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.service.sortColumn = column;
this.service.sortDirection = direction;
}
removeItem(id: number) {
this.tableData$.subscribe((data: supportDB[]) => {
data.map((elem: supportDB, i: number) => { elem.id == id && data.splice(i, 1) })
})
}
}
import { Injectable, PipeTransform } from '@angular/core';
import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
import { supportDB } from '../interface/support';
import { SUPPORTDB } from '../../shared/data/table/SupportTdb';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortColumn, SortDirection } from '../directives/sortable.directive';
interface SearchResult {
Details: supportDB[];
total: number;
}
interface State {
page: number;
pageSize: number;
searchTerm: string;
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const compare = (v1: string | number, v2: string | number) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);
function sort(countries: supportDB[], column: SortColumn, direction: string): supportDB[] {
if (direction === '' || column === '') {
return countries;
} else {
return [...countries].sort((a, b) => {
const res = compare(a[column], b[column]);
return direction === 'asc' ? res : -res;
});
}
}
function matches(support: supportDB, term: string, pipe: PipeTransform) {
return (
support.name.toLowerCase().includes(term.toLowerCase()) ||
support.position.toLowerCase().includes(term.toLowerCase()) ||
pipe.transform(support.salary).includes(term) ||
support.office.toLowerCase().includes(term.toLowerCase()) ||
pipe.transform(support.extn).includes(term) ||
support.email.toLowerCase().includes(term.toLowerCase())
);
}
@Injectable({ providedIn: 'root' })
export class TableService {
private _loading$ = new BehaviorSubject(true);
private _search$ = new Subject();
private _data$ = new BehaviorSubject([]);
private _total$ = new BehaviorSubject(0);
private _state: State = {
page: 1,
pageSize: 10,
searchTerm: '',
sortColumn: '',
sortDirection: '',
};
constructor(private pipe: DecimalPipe) {
this._search$
.pipe(
tap(() => this._loading$.next(true)),
debounceTime(200),
switchMap(() => this._search()),
delay(200),
tap(() => this._loading$.next(false)),
)
.subscribe((result) => {
this._data$.next(result.Details);
this._total$.next(result.total);
});
this._search$.next();
}
get supportdata$() {
return this._data$.asObservable();
}
get total$() {
return this._total$.asObservable();
}
get loading$() {
return this._loading$.asObservable();
}
get page() {
return this._state.page;
}
get pageSize() {
return this._state.pageSize;
}
get searchTerm() {
return this._state.searchTerm;
}
set page(page: number) {
this._set({ page });
}
set pageSize(pageSize: number) {
this._set({ pageSize });
}
set searchTerm(searchTerm: string) {
this._set({ searchTerm });
}
set sortColumn(sortColumn: SortColumn) {
this._set({ sortColumn });
}
set sortDirection(sortDirection: SortDirection) {
this._set({ sortDirection });
}
private _set(patch: Partial) {
Object.assign(this._state, patch);
this._search$.next();
}
private _search(): Observable {
const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;
// 1. sort
let Details = sort(SUPPORTDB, sortColumn, sortDirection);
// 2. filter
Details = Details.filter((support) => matches(support, searchTerm, this.pipe));
const total = Details.length;
// 3. paginate
Details = Details.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
return of({ Details, total });
}
}
