【问题标题】:AngularJS Server side pagination on mouse scroll鼠标滚动时的AngularJS服务器端分页
【发布时间】:2014-12-10 16:09:05
【问题描述】:

我正在寻找一些可以让我开始在鼠标滚动上进行服务器端分页的技术。我有一个大数据集,我想分块加载,然后在鼠标滚动时动态加载更多,但在服务器端。我遇到了ngInfiniteScroll,但这看起来像客户端。有什么方法可以帮助我开始吗?

【问题讨论】:

  • 刚刚实现了 nginfiniteScroll 模块!只要您的 API 端点接受 page 类型的查询参数,那应该会很好用!如果您愿意,我可以链接我的示例。它绝对是客户端/服务器的组合。
  • 我想修改我的 API 以限制最初的加载,然后在鼠标滚动加载更多(因为目前加载所有内容需要大量时间)。是的,我绝对可以看看你的例子
  • 您可以将结果集限制为特定计数!这是我的例子。 gist.github.com/thoughtpalette/97641665082b7067bad7
  • 页面类型查询是什么意思?
  • 滚动查询需要更改,以便请求获取下一组数据。所以像get.("users/?p=1") 这样的东西会在你到达页面底部时增加p 查询。 get.("users/?p=2")这就是请求获得新结果集的方式。

标签: javascript angularjs grails pagination infinite-scroll


【解决方案1】:

ngInfiniteScroll (http://binarymuse.github.io/ngInfiniteScroll/) 所做的是通过在每次用户滚动时调用它来加载你的“后端”,因此你需要实现的是一个用你喜欢的语言编写的使用 JSON 的后端(为了简单起见或xml 或任何可以解析的文件)通过使用 skipsteps 其中 skip 是跳过数据库索引的元素数量,steps 是数量从要获取的跳过索引的位置开始的数据库寄存器。

所以请告诉我们您使用哪种数据库技术来实现无限滚动的跳过/步骤技术。

即:

MongoDB 有 Cursor Skip(更多内容在下面的 url 上)

http://docs.mongodb.org/manual/reference/method/cursor.skip/

【讨论】:

【解决方案2】:

对于无限滚动,您可以使用example 并更改loadMore() 方法,使其像这样调用服务器端。

 $scope.loadMore = function () {
        $http.get('/someUrl').
        success(function (data, status, headers, config) {
            $scope.items.push(data); 
        }).
        error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
    };

【讨论】:

  • 嘿,我有点使用类似于jsfiddle.net/akagr/Eu2FW/4/light 的方法,但每次加载时滚动条都会回到顶部。是不是因为在我的 loadMore 中我调用了一个刷新整个页面部分的休息服务?
  • 您不应该真的刷新所有页面。只需通过 angularJs $http 服务获取下一个项目(将“/someurl”更改为您的数据保存的位置)并将它们添加到现有数组中,如示例中所示。那应该让你解决。成功处理程序需要做一些工作,否则它几乎已经完成了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-10
  • 1970-01-01
  • 2015-08-31
  • 1970-01-01
相关资源
最近更新 更多