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. 120.VS调试技巧

    设置断点调试 在一行代码的左侧点击即可设置断点,按F5(调试->开始调试)即可运行到第一个端点处暂停 逐语句调试 按F11(调试->逐语句)即可开始一步一步执行 逐过程调试 按F10(调试 ...

  2. JumpServer 堡垒机 指南

    堡垒机介绍 在一个特定网络环境下,为了保障网络和数据不受外界入侵和破坏,而运用各种技术手段实时收集和监控网络环境中每一个组成部分的系统状态.安全事件.网络活动,以便集中报警.及时处理及审计定责.    ...

  3. 杭电(hdu)2053 Switch Game 水题

    Switch Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  4. C#创建子线程,子线程使用委托更新控件

    一.背景 由于在窗体程序中通过点击一个button按键后需要更新TreeView控件的内容,由于等待时间比较长,主程序无法一起在那边等待,需要去处理其它的事情,所以就需要创建新的子线程来处理.因为主线 ...

  5. COGS——T 1265. [NOIP2012] 同余方程

    http://cogs.pro/cogs/problem/problem.php?pid=1265 ★☆   输入文件:mod.in   输出文件:mod.out   简单对比时间限制:1 s   内 ...

  6. matlab 局部特征检测与提取(问题与特征)

    物体识别:SIFT 特征: 人脸识别:LBP 特征: 行人检测:HOG 特征: 0. 常见手工设计的低级别特征 manually designed low-level features 语音:高斯混合 ...

  7. 软件——机器学习与Python,Python3的输出与输入

    输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...

  8. 有关Canvas的一点小事—图像绘制

    1.  使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...

  9. 【CS Round #43 B】Rectangle Partition

    [链接]https://csacademy.com/contest/round-43/task/rectangle-partition/ [题意] 水题 [题解] 横着过去,把相邻的边的宽记录下来. ...

  10. 图解String类型的不可变性及其原因

    1.String的不可变性 String s="abcd": 上面的语句定义了一个字符串变量s.该变量指向字符串"abcd",当初始化变量s时,会在堆中为s非配 ...