CODEWITHSUNDEEP
htmlangularjsfilteringhtml-table
TheLimeTrees
TheLimeTrees

Reputation: 411

Filtering Tables: "No search results found"

I have a table with a search bar which filters and displays the rows which it can match. This works fine but I want to implement that what if.

What if there's no search results from what you've decided to search. As it stand the table will simply display nothing. What I need is to instead display some text such as "No search results found." Ideally it would be a neat solution as opposed to an alert box or anything like that.

Any ideas? There's a plnkr below. 

<input type="text" class="form-control" ng-model="query[queryBy]" style="width: 400px;" placeholder="Search" />

http://plnkr.co/edit/KFLbbz0k7ZBcETSvo3L9?p=preview

Upvotes: 0

Views: 84

Answers (2)

Malith
Malith

Reputation: 980

Change you code like this 

 <tr class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty as displayTable">

                <td class="shrink"><b>{{x.a}}</b></td>
                <td class="shrink">{{x.b}}</td>
                <td class="shrink"><u>{{x.c}}</u></td>
                <td class="shrink">{{x.d}}</td>
                <td class="shrink">{{x.e}}</td>
                <td class="shrink">{{x.f}}</td>
                <p ng-if="!displayTable.length">no vals with this filter</p>

            </tr>

you can see your edited demo here

http://plnkr.co/edit/64vaiPReW8MvhpRHBkQd?p=preview

Upvotes: 2

Ronan
Ronan

Reputation: 46

See How to display length of filtered ng-repeat data

You can assign a new variable to the filtered expression

<div ng-repeat="person in filtered = (data | filter: query)">

You can then show a new table row or div to check if this new query's length is 0

<tr ng-show='filtered.length == 0'>
    <td>No</td>
    <td>Results</td>
</tr>

Upvotes: 1

Related Questions