Angularjs使用分页在大型数据集中搜索

发布时间：2020-12-17 10:26:19 所属栏目：安全来源：网络整理

导读：目前我使用filter：query来搜索数据,就像这样 input type="text" ng-model="query"tr ng-repeat="thought in thoughts | filter:query"tdthought.title/td/tr 如果我一次加载完整的json数据,它运行良好. 现在我的问题是我可以实现服务器端搜索以及分页,因为

目前我使用filter：query来搜索数据,就像这样

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

如果我一次加载完整的json数据,它运行良好.
现在我的问题是我可以实现服务器端搜索以及分页,因为我不想一次加载完整的数据集吗？

一种方法：对于当前结果集搜索可以使用过滤器正常执行,如果没有找到结果则调用服务器请求另一条数据.这种做法好吗？

好吧,假设您的服务器上有一个执行搜索并返回子集的API / CGI(例如,通过使用SQL限制开始,数字),实现这一点并不复杂.当您开始一个新查询时,您会将想法设置为空数组,然后进行第一次API调用,例如返回10个结果.然后你可以有一个按钮或任何机制来进行下一个API调用,返回结果11-20.在$http回调函数中,您只需将服务器返回的数据附加到数组中,以便最后添加新数据.所以想想这样的事情(这不是真正经过测试的代码,只是为了这个答案而写下来)：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!