RestAngularSortSearch

Title: Sort by and Search the Content

Description: "Sort by" and "Search" the Content on List data.



Steps:
Step1:
Create the list name "Infolist" and create the columns like below.
Step2: Create the page and edit the page
Step3: add "Script Editer" webpart.

Step4: Add below code to Script Edit webpart



 Code:

1. <style>    
2.     
3.         th {    
4.     
5.             background-color: #0000FF;    
6.     
7.             color: white;    
8.     
9.         }    
10.     
11.     </style>    
12.     
13.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>    
14.     
15.     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>    
16.     
17.      
18.     
19.     <script>    
20.     
21.      
22.     
23.     var myAngApp = angular.module('SharePointAngApp', []);    
24.     
25.     myAngApp.controller('spCustomerController', function ($scope, $http) {    
26.     
27.         $http({    
28.     
29.             method: 'GET',    
30.     
31.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Infolist')/items?$select=Title,Employee,Company",    
32.     
33.             headers: { "Accept": "application/json;odata=verbose" }    
34.     
35.         }).success(function (data, status, headers, config) {    
36.     
37.             $scope.customers = data.d.results;    
38.     
39. $scope.mySortFunction = function(customer) {//Sorting Iteam    
40.     
41.                                     if(isNaN(customer[$scope.sortExpression]))    
42.     
43.                                                 return customer[$scope.sortExpression];    
44.     
45.                                     return parseInt(customer[$scope.sortExpression]);    
46.     
47.                         }    
48.     
49.         }).error(function (data, status, headers, config) {    
50.     
51.      
52.     
53.         });    
54.     
55.      
56.     
57.     });    
58.     
59.      
60.     
61.     </script>    
62.     
63.      
64.     
65.     <br /><br />    
66.     
67.     <div ng-app="SharePointAngApp" class="row">    
68.     
69.         <div ng-controller="spCustomerController" class="span10">    
70.     
71.             <div>    
72.     
73.                 Sort by:    
74.     
75.                 <select ng-model="sortExpression">    
76.     
77.                     <option value="Title">Title</option>    
78.     
79.                     <option value="Employee">Employee</option>    
80.     
81.                     <option value="Company">Company</option>    
82.     
83.                 </select>    
84.     
85.             </div>    
86.     
87.      
88.     
89.             <br />    
90.     
91.             Search By Any:    
92.     
93.             <input type="text" ng-model="search.$" />    
94.     
95.             <br />    
96.     
97.             <br />    
98.     
99.             <table class="table table-condensed table-hover">    
100.     
101.                 <tr>    
102.     
103.                     <th>Title</th>    
104.     
105.                     <th>Employee</th>    
106.     
107.                     <th>Company</th>    
108.     
109.      
110.     
111.                 </tr>    
112.     
113.                 <tr ng-repeat="customer in customers  | orderBy:mySortFunction | filter:search">    
114.     
115.                     <td>{{customer.Title}}</td>    
116.     
117.                     <td>{{customer.Employee}}</td>    
118.     
119.                     <td>{{customer.Company}}</td>    
120.     
121.                 </tr>    
122.     
123.             </table>    
124.     
125.         </div>    
126.     
127.     </div>       

OutPut:

Enter the data, it displays based on input which you gave in textbox.