Server side sorting and searching :-
Whenever if any one types anything in search field we will pass that value as the query parameter. First thing we will do is whenever we type we have to see if the value is defined in the list or not or is it blank.
//Trimmed code $scope.$watch('search', function (newVal, oldVal) { if (angular.isDefined(newVal)) { $scope.contacts.doSearch(newVal); } }) //Trimmed code
Since we are doing search, we will reset after everything is done.
//trimmed code 'persons': [], 'doSearch': function (search) { self.hasMore = true; self.page = 1; self.persons = []; }, //trimmedcode
After we reset everything, we will store the search in an object
//trimmed code 'persons': [], 'search': null, 'doSearch': function (search) { self.hasMore = true; self.page = 1; self.persons = []; self.search = search; self.loadContacts(); }, //trimmed code
For loadContacts function, in the param variable we will add search.
When we run the local Server, we could observe through network console how we are querying.
But the ordering is broken!
To fix this we will follow same $watch which we have used for search, we will use it for order.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/f35051aed3d9868800694727d439b8eccf5513e6
Adding a loading spinner :-
For this purpose we will using angular directive called spin.js https://github.com/urish/angular-spinner
we will install through bower
$ bower install angular-spinner
We will add the dependency in both index.html and main.js. To intially playaround with spinner, we will add this below table tag in index.html.
</table> <span us-spinner="{radius:8, width:5, length:3, lines:9}"></span>
We will load the spinner only when contacts isLoading.
<div ng-show="contacts.isLoading"> <span us-spinner="{radius:8, width:5, length:3, lines: 9}"></span>` </div>
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/812a46d48256998af1eda8b26bcda5745163629a