In Angular click event handler does not working when we click on sorting or pagination.
In Angular click event handler does not working when we click on sorting or pagination.
subbu_palnati
Posts: 4Questions: 1Answers: 0
At very first initial load of the page edit button is working fine, but when we click on sort or navigated different page edit functionality is not working.
<div class="mat-elevation-z8">
<table datatable class="row-border hover" id="table" [dtOptions]="dtOptions" [dtTrigger]="dt"
*ngIf="bookings && bookings.length > 0">
<thead>
<tr>
<th class="sortingId-1">Guest Information</th>
<th class="sortingClass" style="width:25% !important" >Date Submitted</th>
<th class="sortingId" style="width:25% !important">Stateroom</th>
<th class="sortingClass">Ticket ID</th>
<th class="sortingId" style="width:25%; padding-left: 0px !important; padding-right: 19px !important;">Status</th>
<th class="sortingId"></th>
</tr>
</thead>
<tbody class="textdata">
<tr *ngFor="let booking of bookings">
<td><span
class="guest-info-span"> {{booking.firstName | titlecase }} {{booking.lastName | titlecase}}</span>
<span class="guest-info-span-email">{{booking.emailAddress | lowercase}}</span></td>
<td><span class="guest-info-span"> {{booking.orderedDate | dateFormatter}}</span> <span
class="guest-info-span-email">{{booking.orderedDate | timeFormatter}}</span></td>
<td>{{booking.stateroom}}</td>
<td>{{booking.ticketId}}</td>
<td style="padding:8px 3px !important;width:200% !important;">{{booking.ticketStatus | titlecase}}</td>
** <td class="material-icons" style="color: #0097FE; padding-left: 60px" (click)="openDialog(booking.ticketId)">create</td>**
</tr>
</tbody>
</table>
</div>
This discussion has been closed.
Replies
See if this FAQ helps:
https://datatables.net/faqs/index#events
Kevin
Hi Kevin.. i didn't find any examples related to angular for this problem,
this is how i am handing this function, can you please someone help me how to solve this issue. it is working fine in the first page or without sorting but edit click is not working when we click on sort or naviagate to diffrent page
As Kevin said, try using delegated events in your event listener (you haven't shown that code).
If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin