Tuesday, October 20, 2020
therichposts@gmail.com
Angular 10Bootstrap 4.5DatatableJavascript

Angular 10 Datatables with Custom Filters

Angular 10 Datatables with Custom Filters

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 Datatables with Custom Filters.

Angular datatables with custom filters

Angular 10 came and if you are new in Angular 10 then please check below links:

Angular Basic Tutorials

Angular For Beginners


Post Working:

In this post, you will some custom sorting filters and that I have bind with help of jQuery.

Here is the code snippet for Angular 10 Datatables with Custom Filters:

1. Here are the commands you need to run into your terminal for fresh angular 10 setup:

Don’t forget to installed nodejs latest version

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

 

2. Now you need to run below commands into your project terminal to get datatables and its related modules:

I use bootstrap because it makes website look good and balanced

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install bootstrap --save

 

3. Now you need to add below code into your angular.json file to call the styles and scripts of added modules:

...
"styles": [
              ...
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
"scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

 

4. Now add below code inside your src/app/app.module.ts file for modules declaration:

...
import {DataTablesModule} from 'angular-datatables';
...
imports: [
...
DataTablesModule
]

 

5. Now add below code into your src/app/app.component.ts file to make the functions, events and actions:

...
//jquery global varibale
declare var $: any;
...
export class AppComponent {
...

//datatable custom json data
public data = [
    {name: 'Ajay', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  ];
dtOptions: DataTables.Settings = {};
ngOnInit(){
  //datatables settings
  this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
    lengthMenu : [5, 10, 25],
      processing: true
    };

  //Custom Filters by name, email and mobile done with select onchage event

  $(".namefilter").on("change", function(){
    $('#dataTables-example').DataTable().order([0, $(this).val()]).draw();
  });

  $(".emailfilter").on("change", function(){
    $('#dataTables-example').DataTable().order([1, $(this).val()]).draw();
  });

  $(".websitefilter").on("change", function(){
    $('#dataTables-example').DataTable().order([2, $(this).val()]).draw();
  });
}
}

 

6. Finally here is the html code and you need to add into src/app/app.component.html file and this will display the final output on browser:

<div class="container text-center">
  <h1 class="mt-5 mb-5">Angular 10 Datatables with Custom Filters</h1>
  <div class="row">
    <!--Custom Filters -->
    <div class="col-sm-4">
      <div class="form-group">
        <label for="sel1">Select NameBy:</label>
        <select class="form-control namefilter">
          <option value="asc">Ascending Order</option>
          <option value="desc">Descending Order</option>
          
        </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="sel1">Select EmailBy:</label>
        <select class="form-control emailfilter">
          <option value="asc">Ascending Order</option>
          <option value="desc">Descending Order</option>
          
        </select>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="sel1">Select WebsiteBy:</label>
        <select class="form-control websitefilter">
          <option value="asc">Ascending Order</option>
          <option value="desc">Descending Order</option>
          
        </select>
      </div>
    </div>
    
    
  </div>

<!-- Datatable -->
<table id="dataTables-example" class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

</div>

 

This is it and don’t forget to run ng serve command in the end to see the final output. If you have any kind of query then please do comment below.

Notes:

Next post will be Angular 10 datatable with date-time or date-piker filters.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.