CODEWITHSUNDEEP
javascriptangularjs
Dwigh
Dwigh

Reputation: 441

How to use angularjs search filter in table

I am using this for pagination in my tables. The library uses ng-repeat in its directive and creates its own array from the array I pass to it.

I can't use the search filter provided by angularjs since the library does the ng-repeat with its own array(from my array).

Is there any way that I can use the search filter while using this library.

This is what the table looks like(the way the library expects)

<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" 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>

I do not use ng-repeat in my tables. The library does it.

The at-list above is how it takes my array and uses it to create its own array that contains only the rows displayed.

How do I use angularjs search filter?

Edit I changed the html in the library and added a item in libraryArray | filter:searchText and it works, but since the library's array only contains the rows currently displayed, it searches and displays only those in current page(of pagination)

Upvotes: 2

Views: 3003

Answers (2)

RJBo
RJBo

Reputation: 33

A great library for pagination, filtering and sorting all of which is implemented very quickly and easily is ngTable, here's a link:

NPM Link

API and short tutorial

Upvotes: 0

Alon Shmiel
Alon Shmiel

Reputation: 7121

Use ng module: $filter.

You can find this link useful.

(click on "Interactive Example")

Upvotes: 2

Related Questions