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

  
    <title>Step by step Angular 2 QuickStart - Pakainfo.com</title>
    
	<!-- Devloped by Pakainfo.com free download examples -->
    
    
    

    <!--Step  1. Load libraries Devloped by Pakainfo.com -->
     <!-- Polyfill(s) for older browsers Devloped by Pakainfo.com -->
    

    
    
	
	<!-- Devloped by Pakainfo.com free download examples -->
    
    

    <!--Step 2. Configure SystemJS Devloped by Pakainfo.com -->
    
    
	<!-- Devloped by Pakainfo.com free download examples -->
      System.import('app').catch(function(err){ console.error(err);  });
    
  

index.html


  <!--Step 3. Display the application Devloped by Pakainfo.com -->
  
    Loading...
  


app.component.html

<div class="container">
    <div class="col-xs-12 col-md-offset-2">

        <div class="pprice-header">
            <h1>
                <span>Simple Angular2 DataTable simple component Example</span><br />
                <small>by Pakainfo.com</small>
            </h1>
        </div>

        <h2>Simple Angular2 data table</h2>

        <div class="panel panel-success">
            <div class="panel-heading">Some clients information</div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <th style="width: 10%"></th>
                    <th style="width: 20%">
                        Name
                    </th>
                    <th style="width: 40%">
                        Email
                    </th>
                    <th style="width: 10%">
                        Price
                    </th>
                    <th style="width: 20%">
                        Descriptions
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                      <button class="btn btn-danger" title="remove">
                        <span class="glyphicon glyphicon-remove"></span>
                      </button>
                    </td>
                    <td>{{client.name}}</td>
                    <td>{{client.email}}</td>
                    <td class="text-right">{{client.price}}</td>
                    <td>{{client.Desc | uppercase}}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

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": "purvi[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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Angular Validation for Textbox to Accept Only Numbers
  2.   DataTables Column Search Server side processing in PHP
  3.   ng-mousedown Event using Angular Example
  4.   laravel cache clear
  5.   DataTables Pagination Server-side Processing using PHP and MySQL
  6.   Laravel 5.7 Datatables Tutorial With Example
  7.   Laravel 500 internal server error
  8.   Server-side Processing DataTables using PHP with MySQL
  9.   Jquery Datatable listing json Server side in Php Mysql and Ajax
  10.   Download CentOS 7 – DVD & Minimal ISO Images