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.