Когда мы извлекаем данные динамически из API, тогда поиск по таблице данных не работает, когда мы вводим какую-либо строку в поиск ввода таблицы данных, она очищает таблицу и после удаления строки из таблицы поиска текста не показывает никаких данных, но когда мы пробуем это без извлечения данных из API, то это работает правильно.
это мой html код файла
<tbody>
<tr *ngFor="let data of TableData;let i = index;">
<td>{{data.TXN_ID}}</td>
<td>{{data.CREATE_DATE}}</td>
<td>{{data.OID}}</td>
<td>{{data.OID}}</td>
<td>{{data.businessName}}</td>
<td>{{data.CUST_EMAIL}}</td>
<td>{{data.PAYMENT_TYPE}}</td>
<td>{{data.CURRENCY_CODE}}</td>
<td>{{data.AMOUNT}}</td>
<td>{{data.INTERNAL_CURRENCY_CHANGE_RATE}}</td>
<td>{{data.TXN_ID}}</td>
</tr>
</tbody>
это мой код файла ts
ngAfterViewInit(){
this.dataTable = $(this.dataTable.nativeElement);
this.dtOptions = {
dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
"B" +
">r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs' l><'col-xs-12 col-sm-6'p>>",
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
deferRender:true,
autoWidth: true,
retrieve: false,
responsive: false,
scrollX:false,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print',
{
extend: 'collection',
text: 'Select Columns',
buttons: [ {
extend: 'columnsToggle',
columns: ':not([data-visible="false"])'
} ],
className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
},
],
};
let _dataTable = this.dataTable.DataTable(this.dtOptions);
// $('#dataTable thead tr').clone(true).appendTo('#dataTable thead');
$('#dataTable thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$('input', this).on( 'keyup change', function () {
if ( _dataTable.column(i).search() !== this.value ) {
_dataTable
.column(i)
.search( this.value )
.draw();
}
} );
} );
this.getDataFromService.getReport(body).subscribe(data => {
this.TableData = data['statusDesc'];
});
}