[AngularFire2] Pagination
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的更多相关文章
- pagination 分页
<!DOCTYPE html> <html> <head> <title>pagination</title> <style type ...
- salesforce 零基础学习(四十九)自定义列表分页之使用Pagination实现分页效果 ※※※
上篇内容为Pagination基类的封装,此篇接上篇内容描述如何调用Pagination基类. 首先先创建一个sObject,起名Company info,此object字段信息如下: 为了国际化考虑 ...
- salesforce 零基础学习(四十八)自定义列表分页之Pagination基类封装 ※※※
我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...
- knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页
Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例 ...
- ajax pagination 布局刷新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- jQuery Pagination分页插件的使用
一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...
- web 前端常用组件【01】Pagination 分页
分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较 ...
随机推荐
- 76.Nodejs Express目录结构
转自:https://blog.csdn.net/xiaoxiaoqiye/article/details/51160262 Express是一个基于Node.js平台的极简.灵活的web应用开发框架 ...
- Codefroces 415B Mashmokh and Tokens
B. Mashmokh and Tokens time limit per test 1 second memory limit per test 256 megabytes input standa ...
- ES6--基础语法(一)
一.支持环境:node.js完全支持,标准浏览器完全支持.二.测试环境: chrome下需要在script标签的最先开始的地方需要添加"use strict". firefox下需 ...
- 解决Docker容器内访问宿主机MySQL数据库服务器的问题
懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...
- 用内置的库turtle来画一朵花,python3
题目:用内置的库turtle来画一朵花 看了群主最后成像的图片,应该是循环了36次画方框,每次有10度的偏移. 当然不能提前看答案,自己试着写代码. 之前有用过海龟画图来画过五角星.奥运五环.围棋盘等 ...
- 00082_Set接口
1.Set接口介绍 (1)Collection中可以存放重复元素,也可以不存放重复元素,那么我们知道List中是可以存放重复元素的.那么不重复元素给哪里存放呢?那就是Set接口,它里面的集合,所存储的 ...
- sql简单的语句
选择:select * from table1 where 范围 插入:insert into table1(field1,field2) values(value1,value2) 删除:delet ...
- stm8开发环境配置及测试
需要准备的软件,硬件,IAR for stm8 (EWSTM8).stm8s标准固件库.ST-LINK.STM8s003f3核心板 安装IAR(其中包括st-link的驱动), 到这个网址下载stm8 ...
- 七、Docker+nginx
原文:七.Docker+nginx docker run -p 80:80 --name nginx-v1.0.0 -v /usr/nginx/www:/www -v /home/docker/ngi ...
- Activity Test1
源代码下载(免积分) :下载 Acitivty測试的API的父类是InstrumentationTestCase.这个类可以获取Instrumentation.来操作Activity. 对于acti ...