[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 功能强大,可扩展性比较 ...
随机推荐
- 数据结构——串的朴素模式和KMP匹配算法
一.朴素模式 假设我们要从主串S="goodgoogle"中找到子串T="google"的位置,步骤如下: i表示主串的当前位置下标,j表示子串的当前位置下标, ...
- jdbc的数据库驱动类DriverManager.getConnection()详解
1.Oracle8/8i/9i数据库(thin模式) Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); ...
- Python day字符串所有使用
字符串所有的操作name = "dio"names = "my\t name is {Name} and i am a {job}"print(name.cap ...
- Ubuntu下SVN服务器安装和配置
一.SVN安装1.安装包$ sudo apt-get install subversion 2.添加svn管理用户及subversion组#添加用户$ sudo adduser svnuser#添加 ...
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) D】Bash and a Tough Math Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于1操作 令len = r-l+1 等价于查找l..r这个范围内x的倍数的个数是否大于等于len-1 也即l..r这个范围内不是x ...
- 微软推送Win10致全球网络负担增大,中国网友表示毫无压力
7月29日晚间,微软的Windows10操作系统正式上市发行.微软将面向全球190个国家地区进行windows10的免费升级推送. 眼下, Windows 10 正以疯狂的速度登陆全球各类设备 ...
- launcher- 第三方应用图标替换
有时候我们感觉第三方应用的icon不美观,或者跟我们主题风格不一致,这时候我们希望换成我们想要的icon,那我们可以这么做(以更换QQ应用icon为例): 1.首先我们当然要根据自己的需要做一张替换i ...
- index action分析
上一篇从结构上分析了action的,本篇将以index action为例仔分析一下action的实现方式. 再概括一下action的作用:对于每种功能(如index)action都会包括两个基本的类* ...
- activity 接回返回值
activity 接回返回值 今天做订单列表显示 点击某一项显示订单详细信息,在详细activity中用户可以选择取消订单(未支付的状态下)当用户取消订单后订单列表也要改变状态,原来最初做法是所加载绑 ...
- CF741DArpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths(DSU on tree)
题目大意: 给定一个以1为根的树,每条路径上都有一个字符(a~v共22个)询问对于每一个子树内最长的路径上字母经排序后可以形成回文串的最长路径多长 解题思路: 假定给你一个字符串,如何判定其经打乱能否 ...