1

I am working on an Angular application using PrimeNG. In particular I am using the PrimeNG p-table component and I am finding some problem with Global Search.

This is the component: https://www.primefaces.org/primeng/showcase/#/table

This is my HTML code related to my table:

<p-table #dtEmployee [value]="employeesList$ | async" 
            [(selection)]="selectedEmployees" dataKey="id" styleClass="p-datatable-employees" [rowHover]="true"
            [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
            [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
            <ng-template pTemplate="caption">
                <div class="table-header">
                    Lista impiegati
                    <span class="p-input-icon-left">
                        <i class="pi pi-search"></i>
                        <input pInputText type="text" (input)="dtEmployee.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
                    </span>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 3rem"></th>
                    <th pSortableColumn="firstName">Name <p-sortIcon field="firstName"></p-sortIcon></th>
                    <th pSortableColumn="socialSecurityCode">Codice fiscale <p-sortIcon field="socialSecurityCode"></p-sortIcon></th>
                    <th pSortableColumn="companyEmail">E-mail aziendale <p-sortIcon field="companyEmail"></p-sortIcon></th>
                    <th pSortableColumn="companyPhone">Telefono aziendale <p-sortIcon field="companyPhone"></p-sortIcon></th>
                    <th pSortableColumn="personalEmail">E-mail personale <p-sortIcon field="personalEmail"></p-sortIcon></th>
                    <th pSortableColumn="personalPhone">Telefono personale <p-sortIcon field="personalPhone"></p-sortIcon></th>
                   
                    <th style="width: 8rem"></th>
                </tr>

                <tr>
                    <th>
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'firstName', 'startsWith')" placeholder="Cerca per nome" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'socialSecurityCode', 'startsWith')" placeholder="Cerca per codice fiscale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyEmail', 'startsWith')" placeholder="Cerca per e-mail aziendale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyPhone', 'startsWith')" placeholder="Cerca per e-mail personale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalEmail', 'startsWith')" placeholder="Cerca per telefono aziendale" class="p-column-filter">
                    </th>
                    <th>
                        <input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalPhone', 'startsWith')" placeholder="Cerca per tenefono personale" class="p-column-filter">
                    </th>
                    
                    
                    <th></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-employee>
                <tr class="p-selectable-row">
                    <td>
                        <p-tableCheckbox [value]="employee"></p-tableCheckbox>
                    </td>
                    <td>
                        <span class="p-column-title">Nome</span>
                        {{employee.completeName}}
                    </td>
                    <td>
                        <span class="p-column-title">Codice fiscale</span>
                        <span class="image-text">{{employee.socialSecurityCode}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">E-mail aziendale</span>
                        <span class="image-text">{{employee.companyEmail}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">Telefono aziendale</span>
                        <span class="image-text">{{employee.companyPhone}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">E-mail personale</span>
                        <span class="image-text">{{employee.personalEmail}}</span>
                    </td>
                    <td>
                        <span class="p-column-title">Telefono personale</span>
                        <span class="image-text">{{employee.personalPhone}}</span>
                    </td>
                    
                    
                    <td style="text-align: center">
                        <button pButton 
                                type="button" 
                                class="p-button-secondary centered-icon" 
                                icon="pi pi-info-circle"
                                (click)="showEmployeDetailsDialog(employee)">
                        </button>
                        <button pButton type="button" class="p-button-secondary centered-icon" icon="pi pi-cog"></button>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td colspan="3">Non sono stati trovati impiegati.</td>
                </tr>
            </ng-template>
    </p-table>

It renders this view:

enter image description here

As you can see the table header contains filters for each fields (these search filters works fine) and the highlighted global search filter field. This is not working. Infact if I try to search something I will always obtain an empty table, searching for a value inside a field infact I am obtaining:

enter image description here

I obtain the same behavior searching for information inside other fields.

What is wrong? What am I missing? How can I try to fix it?

3 Answers 3

2

Viral Patel is correct, you are using the example's globalFilterFields. Instead, specify the table fields you want to include in the search:

[globalFilterFields]="['firstName','socialSecurityCode','companyEmail','companyPhone','personalEmail','personalPhone']

As far as the icon, it does that for me too. I did this to get around it. It puts the icon on the outside of the search box, but it is better than default.

You can do placeholder="cerca dipendenti", instead of placeholder="Global Search" (If google translate is to be trusted).

<div class="d-flex align-items-center">
          <i class="fa fa-search mr-1"></i>
          <input
            type="text"
            pInputText
            size="30"
            placeholder="Search"
            (input)="dt.filterGlobal($event.target.value, 'contains')"
          />
</div>
1
  • Include the complete solution in you answer. I see that you have relied on other answer for the first part of the question. This is no especially in case the other person removes the answer.
    – Birju Shah
    May 6, 2021 at 16:01
0

Your global serach is not working because you pass wrong fileds inside your [globalFilterFields] property. globalFilterFields is an array of fields as string to use in global filtering. So you need to set like below

[globalFilterFields]="['firstName','socialSecurityCode','companyEmail','companyPhone','personalEmail','personalPhone']
0

The icon is outside because the following module is not imported.

import { InputTextModule } from 'primeng/inputtext';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.