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. 玲珑学院 1014 Absolute Defeat

    SAMPLE INPUT 3 2 2 2 1 1 5 1 4 1 2 3 4 5 4 10 3 1 2 3 4 SAMPLE OUTPUT 1 0 15 前缀和,每个元素都判断一下. #include ...

  2. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  3. 关于IDEA编译器在初次使用thymeleaf 引入无效 , 导致th无法使用的原因

    首先pom.xml里面要导入thymeleaf的依赖 然后在html中加入  xmlns:th="http://www.thymeleaf.org" 最后点击file ---> ...

  4. 洛谷 P1553 数字反转(升级版)

    P1553 数字反转(升级版) 题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调 ...

  5. 【UML】UML在软件开发各个阶段的应用

    一.UML5个互联视图 UML中经常使用5个互联的视图来描写叙述系统的体系结构. 如图 (1)用例视图(Use-case View) 由专门描写叙述可被终于用户.分析人员.測试人员看到的系统行为的用例 ...

  6. actionMode - 在屏幕中的显示位置设置

    actionMode 默认的显示位置是在屏幕上方的,如果想要移到下方,可以添加如下属性 在AndroidManifest.xml 的activity中,做如下修改 <activity andro ...

  7. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  8. js刷新页面有哪几种方法

    js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

  9. 新手前端笔记之--css盒子

    css盒子就是它的盒模型,所有css的布局都是以此作为基础的,很有必要来详细记录一下. 1.盒子的尺寸就是margin+padding+border+content的总和,这很好理解,但令人迷惑的可能 ...

  10. prettyJson V7.1 使用

    头文件 #include "document.h" #include "prettywriter.h" #include "filereadstrea ...