Let's see how to do pagination in Firebase:

For the init loading, we only want 3 items:

  findLessonsKeyPreCourseUrl(courseUrl) {
return this.findCourseByUrl(courseUrl)
.filter(course => !!course)
.map((course) => course.$key)
.switchMap((courseKey) => this.db.list(`lessonsPerCourse/${courseKey}`, {
query: {
limitToFirst: ,
orderByKey: true
}
}));
}

'limitToFirst' --> If not given 'startAt', will start from index 0, and get three items.

Next page: The idea is getting 4 items from the previous page's last item, after that we get rid of first item only keep the rest:

  findNextPageLessonsKey(courseUrl: string, from: Lesson, limit: number){
return this.findCourseByUrl(courseUrl)
.filter(c => !!c)
.switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
query: {
limitToFirst: limit + ,
orderByKey: true,
startAt: from.$key
}
}))
.map(lessons => lessons.slice(, lessons.length));
}

Previous Page: The same idea as next page, difference is this time we get 4 item from next page's first item, then get rid of the last item only keep the rest:

  findPreviousPageLessonsKey(courseUrl: string, end: Lesson, limit: number){
return this.findCourseByUrl(courseUrl)
.filter(c => !!c)
.switchMap((c) => this.db.list(`lessonsPerCourse/${c.$key}`, {
query: {
limitToLast: limit + ,
orderByKey: true,
endAt: end.$key
}
}))
.map(lessons => lessons.slice(, lessons.length-));
}

[AngularFire2] Pagination的更多相关文章

  1. pagination 分页

    <!DOCTYPE html> <html> <head> <title>pagination</title> <style type ...

  2. salesforce 零基础学习(四十九)自定义列表分页之使用Pagination实现分页效果 ※※※

    上篇内容为Pagination基类的封装,此篇接上篇内容描述如何调用Pagination基类. 首先先创建一个sObject,起名Company info,此object字段信息如下: 为了国际化考虑 ...

  3. salesforce 零基础学习(四十八)自定义列表分页之Pagination基类封装 ※※※

    我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...

  4. knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

    Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例  ...

  5. ajax pagination 布局刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

  7. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  8. jQuery Pagination分页插件的使用

    一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  9. web 前端常用组件【01】Pagination 分页

    分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较 ...

随机推荐

  1. Ajax往后台传参数,无参数,一个参数,多个参数,一个对象等

    原文:http://www.cnblogs.com/chenwolong/p/Get.html //无参数请求-简单示例 $(document).ready(function () { $.ajax( ...

  2. javafx drag

    public class EffectTest extends Application { @Override public void start(Stage stage) { stage.setTi ...

  3. VMware Vsphere 6.0安装部署 vCenter Server安装

    几个不同的组件 vCenter Server:对ESXi主机进行集中管理的服务器端软件,安装在windows server 2008R2或以上的操作系统里,通过SQL 2008R2 或以上版本的数据库 ...

  4. Model、ModelMap、ModelAndView的作用及区别

    Model.ModelMap.ModelAndView的作用及区别 对于MVC框架,控制器controller执行业务逻辑 用于产生模型数据Model 视图view用来渲染模型数据 Model和Mod ...

  5. 一个Web报表项目的性能分析和优化实践(七):性能监测工具JavaMelody

    简介 JavaMelody 能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请 ...

  6. 【Henu ACM Round #12 B】 Alice, Bob, Two Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写个前缀和 和 一个后缀和. (即前i个字符A所代表的数字的和以及前i个字符B所代表的数字的和.. 然后枚举前i个字符翻转. 求B对 ...

  7. 洛谷 P1226 取余运算||快速幂

    P1226 取余运算||快速幂 题目描述 输入b,p,k的值,求b^p mod k的值.其中b,p,k*k为长整型数. 输入输出格式 输入格式: 三个整数b,p,k. 输出格式: 输出“b^p mod ...

  8. AIX中经常使用的SMIT 的使用

    AIX中经常使用的SMIT 的使用 1.  smit 的日志文件 (1)$HOME/smit.log      记录了所訪问的全部菜单.对话内容,所运行的命令和输出结果 在 SMIT 会话中出现的全部 ...

  9. selenium模块用法详解

    selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...

  10. canvas:飞机大战

    最开始我们要初始化信息,我们有五个状态,游戏封面,加载状态,运行状态,游戏暂停,游戏结束 我们还需要得分score,生命life var START = 1;//初始状态 var LOADING = ...