Exploring column-specific searches using text input in an angular 5 datatable

Could someone explain how I can implement the Individual column searching feature for a datatable in an Angular 5 application?

I'm stuck on this issue. Any help would be greatly appreciated.

  • Here is my TypeScript file:

    dtOptions: DaaTables.Settings = {};

    ngOnInit() {
        console.log(this.items)
        this.dtOptions = {
          pagingType: 'full_numbers',
          pageLength: 5,
          ordering:true,
          orderCellsTop:true,
        };
        this.service.getUsers().subscribe(users=>{
          this.users=users;
          this.dtTrigger.next();
          console.log(this.users)
    
        });
    
      }
    

And this is my HTML file

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
      <thead>
      <tr>
        <th><input type="text" class="form-control"
                   placeholder="ID" /></th>
        <th><input type="text" class="form-control"
                   placeholder="name" /></th>
        <th><input type="text" class="form-control"
                   placeholder="username" /></th>
      </tr>
      <tr>
        <th>ID</th>
        <th>name</th>
        <th>username</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.username }}</td>
      </tr>
      </tbody>
    </table>

Answer №1

This is my method :

 ngAfterViewInit() {
        console.log('ContactsComponent - ngAfterViewInit()');
        this.dtTrigger.next();
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.columns().every(function () {
                const that = this;
                $('input', this.footer()).on('keyup change', function () {
                    console.log('search(): ' + that.search());
                    console.log('value: ' + this['value']);
                    if (that.search() !== this['value']) {
                        that.search(this['value'])
                            .draw();
                    }
                });
            });
  });

Add the following in your HTML file, under a footer with attribute name = search-yourfield :

<tfoot>
    <tr>
       <th>Selection</th>
       <th><input type="text" placeholder="Search ID" name="search-idaicontact"/></th>
       <th><input type="text" placeholder="Search first name" name="search-identifiant"/></th>
       <th><input type="text" placeholder="Search last name" name="search-nom"/></th>
       <th><input type="text" placeholder="Search last name" name="search-prenom"/></th>
       <th>Action</th>
   </tr>
</tfoot>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: Exploring Component Communication with the flexibility of optional input parameters

I am facing a situation where the parent component needs to transmit certain data to a child component using the @Input parameter in Angular. However, this data transfer is not mandatory and the parent may choose whether or not to pass it based on the sp ...

Troubleshooting webpack encore issues with importing enums from node_modules

I am faced with a challenge of utilizing an enum from a library I created in a different project. The library is developed using Vue and typescript, bundled with rollup. On the other hand, the project is built with Symfony, with the front end also using Vu ...

Error message received when making an API call in React Native for Android and saving the response to a local database: 'Error: Network

Despite using axios and promises to make a call to a local database API, I am facing difficulties reaching the endpoint as I constantly receive a 'Error: Network Error' feedback in the console without any further explanation on the root cause of ...

The paths required are not correct following the transpilation of a TypeScript file using Babel

Issue Every time I use nodemon with npm run start, I encounter the error message "Error: Cannot find module 'Test'". Similarly, when I build files using npm run build and try to run ./dist/index.js, I face the same issue. It seems that the requ ...

How to integrate Three.js into Angular 14 while managing dependencies

I'm currently working on developing a web app using angular cli and incorporating three.js for enhanced product interaction. Despite watching numerous tutorials, I've been unable to successfully integrate three js into angular 14. It seems to wor ...

Function in Typescript that accepts an extended interface as a parameter

I am facing an issue with my interface named "Example" which has a function type called "exampleFunction". The problem arises when this function takes a super class as an input parameter because TypeScript is reporting an error. It states that I cannot use ...

Consecutive POST requests in Angular 4

Can you assist me with making sequential (synchronous) http POST calls that wait for the response from each call? generateDoc(project, Item, language, isDOCXFormat) : Observable<any> { return this.http.post(this.sessionStorageService.retriev ...

Tips for dealing with strong reference cycles in TypeScript?

I have created a tree-like structure in my implementation, consisting of parent and child objects. The parents contain a list of children while the children have references to their parents, facilitating easy navigation through the tree. I am now contempla ...

Exploring Angular routing with parameters and extracting parameter values

In an email, a user will click on a link that looks like this: do-something/doSomething?thing=XXXXXXXXXXX I'm trying to figure out how to define the route in the router and subscribe to get params. Here's what I currently have set up in the rout ...

What is the best way to upgrade Angular from version 10 to 12?

Currently tackling an Angular project migration from version 10 to version 12. Unfortunately, the project seems to be encountering issues post-migration and is not running as expected. ...

TS2604: The JSX element '...' lacks any construct or call signatures and is unable to be processed

As part of our company's initiative to streamline development, I am working on creating a package that includes common components used across all projects. We primarily work with TypeScript, and I have successfully moved the code to a new project that ...

Tips for handling promises in a class getter method in TypeScript

In two of my classes, I use async/await functions to retrieve products from the product class. export default class Products { async getProducts() : Promise<[]> { return await import('../data/products.json'); } } export defa ...

Utilizing the [innerHTML] attribute within the <mat-select><mat-option> tags

I have integrated the use of [innerHTML] within <mat-option> in <mat-select>, which displays correctly in the drop-down list but not for the selected value. Versions: Browser Google Chrome 68.0.3440.106 (Official Build) (64-bit) Angular 6.1 ...

Is TypeScript 2.8 Making Type-Safe Reducers Easier?

After reading an insightful article on improving Redux type safety with TypeScript, I decided to simplify my reducer using ReturnType<A[keyof A]> based on the typeof myActionFunction. However, when creating my action types explicitly like this: exp ...

Guide to retrieving Azure web app application settings in a TypeScript file

I recently created an Angular 2 application using Visual Studio 2015. After that, I successfully published my Angular 2 web app to Azure Web App and everything seems to be working fine. However, I am facing a challenge in accessing the application setting ...

Exploring Deeply Nested Routing in Angular

I've been exploring the use of multiple router outlets and encountered an issue. When using the navigateBy function of the router, I am unable to view my child route and encounter an error. However, when I access it via the routerLink in HTML, I get ...

I'm encountering a 502 error while trying to use Supabase's signInWIthPassword feature

Despite all authentication functions working smoothly in my React, TypeScript, and Supabase setup, I'm facing an issue with signInWithPassword. In my context: I can successfully signIn, create a profile, and perform other operations like getUser() an ...

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

The ssp.class.php filters from Datatables.net are not producing any results

It seems that I am facing a basic misunderstanding of how the ssp.class works, especially in relation to the column definitions. I am not entirely sure about the functionality of the 'dt' key unless I thoroughly review the code. I believe I can a ...

When attempting to utilize an Angular component in an AngularJS environment, the component may fail to display properly

I have followed various articles and posts to set up the basic configuration for bootstrapping an AngularJS app in preparation for migration. import { DoBootstrap, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/plat ...