Angular2 Datatable Pagination, Sorting and Searching
In this Post We Will Explain About is Angular2 Datatable Pagination, Sorting and Searching With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angular2-datatable-pagination Example
In this post we will show you Best way to implement Datatable Pagination, Sorting and Search – Angular 2, hear for Bootstrap Table With Sorting, Searching and Paging using dataTable Angular 2 with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Angular 2 Datatable with Paging,Sorting,Searching
In this Example,First of all Add or Inluce External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priorty set.After that Include your relavant CSS Class.
Folder Structure
Below some files for Angular2 Datatable Tutorial
app -app.component.html -app.component.ts -data.json -main.ts index.html systemjs.config.js
Include External Libs
Step by step Angular 2 QuickStart - Pakainfo.com
System.import('app').catch(function(err){ console.error(err); });
index.html
Loading...
app.component.html
Simple Angular2 DataTable simple component Example
by Pakainfo.comSimple Angular2 data table
Some clients information
Name Price Descriptions {{client.name}} {{client.email}} {{client.price}} {{client.Desc | uppercase}}
app.component.ts
//namespace import
import {Component} from '@angular/core';
import {DatePipe} from "@angular/common";
import {HTTP_PROVIDERS, Http} from "@angular/http";
import {DataTableDirectives} from 'angular2-datatable/datatable';
import * as _ from 'lodash';
//config component
@Component({
selector: 'live-app',
templateUrl: 'app/app.component.html',
providers: [HTTP_PROVIDERS],
directives: [DataTableDirectives],
pipes: [DatePipe]
})
export class AppComponent {
//data private
private data;
constructor(private http:Http) {
http.get("app/data.json")
.subscribe((data)=> {
setTimeout(()=> {
this.data = data.json();
}, 1000);
});
}
private sortByWordLength = (a:any) => {
return a.name.length;
}
public removeClient(client: any) {
this.data = _.filter(this.data, (elem)=>elem!=client);
console.log("Remove: ", client.email);
}
}
data.json
[
{
"name": "Arvind",
"email": "[email protected]",
"prodcrDate": "2018-01-09T14:48:34-08:00",
"Desc": "hiren",
"price": 25
},
{
"name": "shailesh",
"email": "[email protected]",
"prodcrDate": "2019-01-23T20:09:52-08:00",
"Desc": "kanjibhai",
"price": 32
},
{
"name": "mobile",
"email": "[email protected]",
"prodcrDate": "2018-11-19T19:11:33-08:00",
"Desc": "Bruderheim",
"price": 31
},
{
"name": "ramesh",
"email": "[email protected]",
"prodcrDate": "2018-11-02T07:59:34-08:00",
"Desc": "maganalala",
"price": 50
},
{
"name": "Dhara",
"email": "[email protected]",
"prodcrDate": "2019-02-25T15:42:17-08:00",
"Desc": "dhara",
"price": 24
},
{
"name": "Sejal",
"email": "[email protected]",
"prodcrDate": "2018-03-07T03:47:55-08:00",
"Desc": "jigar shah",
"price": 23
},
{
"name": "pratik shah",
"email": "[email protected]",
"prodcrDate": "2019-02-27T20:03:50-08:00",
"Desc": "shah",
"price": 45
},
{
"name": "bhoomi",
"email": "[email protected]",
"prodcrDate": "2018-03-02T03:59:17-08:00",
"Desc": "savaliya bhoomi",
"price": 21
},
{
"name": "jagdish donga",
"email": "donga [email protected]",
"prodcrDate": "2018-11-07T20:48:43-08:00",
"Desc": "Donga jagdish",
"price": 38
},
{
"name": "Rakesh vadi",
"email": "[email protected]",
"prodcrDate": "2018-02-11T22:14:36-08:00",
"Desc": "Rakesh sir Perticara",
"price": 43
},
{
"name": "Dinesh",
"email": "[email protected]",
"prodcrDate": "2018-04-23T12:29:39-07:00",
"Desc": "dinesh shoya",
"price": 25
},
{
"name": "jitu kalariya",
"email": "[email protected]",
"prodcrDate": "2018-08-18T12:06:56-07:00",
"Desc": "jitu kalariya",
"price": 35
},
{
"name": "natahlala",
"email": "[email protected]",
"prodcrDate": "2018-12-24T00:53:04-08:00",
"Desc": "natahlala",
"price": 31
},
{
"name": "Dhirubhai",
"email": "[email protected]",
"prodcrDate": "2018-03-31T11:45:57-07:00",
"Desc": "gondaliya ramesh bhai",
"price": 36
},
{
"name": "maganbhai gediya",
"email": "[email protected]",
"prodcrDate": "2018-09-07T16:12:31-07:00",
"Desc": "ramjibhai damo",
"price": 38
},
{
"name": "nathabhai sagpariya",
"email": "[email protected]",
"prodcrDate": "2018-08-01T12:45:06-07:00",
"Desc": "Natahalal sagpariya",
"price": 25
},
{
"name": "sanjay bhai sagpariya",
"email": "[email protected]",
"prodcrDate": "2018-02-23T10:20:18-08:00",
"Desc": "sanjay bhai sagpariya",
"price": 32
},
{
"name": "mitesh gediya",
"email": "[email protected]",
"prodcrDate": "2018-07-18T19:26:59-07:00",
"Desc": "mitesh gediya",
"price": 21
},
{
"name": "Rushika",
"email": "[email protected]",
"prodcrDate": "2018-12-07T17:31:26-08:00",
"Desc": "gediya rushika",
"price": 30
},
{
"name": "jagruti",
"email": "[email protected]",
"prodcrDate": "2018-09-23T20:17:41-07:00",
"Desc": "İslahiye",
"price": 20
},
{
"name": "dhameliya hitesh bhai",
"email": "[email protected]",
"prodcrDate": "2018-06-14T12:12:00-07:00",
"Desc": "dhameliya hitesh bhai",
"price": 20
},
{
"name": "kajala sojitra",
"email": "[email protected]",
"prodcrDate": "2018-10-14T18:52:48-07:00",
"Desc": "kajal ben sojitra",
"price": 22
},
{
"name": "purvi",
"email": "[email protected]",
"prodcrDate": "2018-09-20T18:06:55-07:00",
"Desc": "manshi",
"price": 28
},
{
"name": "hiral",
"email": "[email protected]",
"prodcrDate": "2018-12-29T09:49:13-08:00",
"Desc": "jenshi",
"price": 24
},
{
"name": "madhubala",
"email": "[email protected]",
"prodcrDate": "2018-07-09T12:03:31-07:00",
"Desc": "madhubala",
"price": 30
},
{
"name": "alpa",
"email": "[email protected]",
"prodcrDate": "2018-03-21T02:28:40-07:00",
"Desc": "dongaalpa",
"price": 43
}
]
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example
I hope you have Got What is Pagination, Searching and Sorting of Data Table using Angular 2 And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.