Angular2 Datatable Pagination, Sorting and Searching

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.com

Simple Angular2 data table

Some clients information
Name Email 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);

Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

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.

Leave a Comment