Angularjs Search in large data set with pagination

Question

currently I use filter:query for searching within the data, something like this

<input type="text" ng-model="query">
<tr ng-repeat="thought in thoughts | filter:query">
<td>thought.title</td>
</tr>

It works well, if I load the complete json data at once. Now my question is can I achieve server side search along with pagination as I don't want to load the complete data set at once?

One approach : For the current result set search can be performed normally using filters, if no results are found make a call to server requesting the another piece of data. Is this approach good ?

Answer 1

Well, assuming you have a API/CGI on your server which executes the searches and returns a subset (e.g. by using SQLs limit start,number) it shall not be that complicated to achieve this. When you start a new query you would set thoughts to a empty array and then make the first API call, e.g. returning 10 results. And then you could have a button or whatever mechanism to make the next API call, returning result 11-20. In your $http callback function you would then simply always append the data returned by the server to your array, so that new data is added at the end. So think of something like this (this is no actual tested code, just written down for the sake of this answer):

$scope.getdata = function() {
  $http.post('/api/whatever', 
  { query: $scope.query, startat: $scope.thoughts.length })
    .success(function(response,status,headers,config){
      $scope.thoughts.push.apply( $scope.thoughts, reponse.data );
    });

$scope.search = function() {
  $scope.thoughts = [];
  $scope.getdata();
}

Search for: <input ng:model="query">
<button ng:click="search()">Search</button>
<button ng:click="getdata()">Get more results</button>

Answer 2

There's not going to be any way to do a client-side search unless you load all the data into the client with your first ajax request.

Server side search is probably gonna be your best bet.