[AngularFire2] Pagination
Pagination
2023-09-14 08:59:19 时间
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: 3, 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 + 1, orderByKey: true, startAt: from.$key } })) .map(lessons => lessons.slice(1, 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 + 1, orderByKey: true, endAt: end.$key } })) .map(lessons => lessons.slice(0, lessons.length-1)); }
相关文章
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
- vue 分页 pagination
- [Lab] DymamoDB Pagination
- [Node.js] Web Scraping with Pagination and Advanced Selectors
- [Lab] DymamoDB Pagination
- [AngularFire2] Pagination
- [Node.js] Web Scraping with Pagination and Advanced Selectors
- jquery分页插件pagination.js的使用
- 92. 基于 SAP UI5 JSONModel 客户端模型的列表分页显示(Table Pagination)前提
- SAP UI5 应用开发教程之九十二 - 基于 SAP UI5 JSONModel 客户端模型的列表分页显示(Table Pagination)前提试读版
- SAP Spartacus的pagination$ -默认的分页设置10
- SAP UI5 应用开发教程之九十二 - 基于 SAP UI5 JSONModel 客户端模型的列表分页显示(Table Pagination)前提试读版
- element-el-pagination 分页-控制每页展示数量(整理)
- uniapp 微信小程序分页方法:uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
- elementui 分页el-pagination遇到的所有坑(current失效、分页组件不显示、视图不改变等)
- EasyUI基础入门之Pagination(分页)
- EasyUI DataGrid和Pagination
- 前端案例:基于el-table和el-pagination实现数据的分页效果
- jquery分页插件pagination.js的使用