Currently, I am implementing pagination in my tables using a library called Angular Table. This library utilizes the ng-repeat
directive to create its own array from the data I provide.
Due to this implementation, I am unable to utilize the search filter functionality provided by AngularJS as the library uses its own array for rendering.
I am looking for a way to incorporate the search filter feature while still utilizing the Angular Table library.
The structure of the table, as expected by the library, is as follows:
<table at-table at-list="myarray" at-paginated at-config="tableConfig">
<thead>
<tr>
<th class="text-center" at-attribute="index">Sl No</th>
<th class="text-center" at-attribute="vendor_name">Vendor Name</th>
<th class="text-center" at-attribute="email_id">EmailId</th>
<tr>
</thead>
<tbody>
<tr>
<td class="text-center" at-attribute="index">{{calculateIndex($index)}}</td>
<td class="text-center" at-sortable at-implicit at-attribute="vendor_name"></td>
<td class="text-center" at-sortable at-implicit at-attribute="email_id"></td>
</tr>
</tbody>
</table>
<div>
<at-pagination at-config="tableConfig" at-list="myarray"></at-pagination>
</div>
In this setup, the library handles the use of ng-repeat
for displaying data.
The at-list
attribute is responsible for transforming my original array into the library's format for display purposes.
I am seeking guidance on how to integrate the AngularJS search filter within this context.
Edit: I have made alterations to the HTML code within the library by including a
item in libraryArray | filter:searchText
, which has enabled the search filter functionality. However, it currently only searches and displays results within the current page of pagination due to the library's array structure.