شنبه ۰۵ شهریور ۰۱ ۱۴:۵۸ ۳۳ بازديد
دقت داشته باشید که در طراحی اپلیکیشن در مشهد اینجا رایا پارس از Math.ceil()به کارگیری میکنیم تا مطمئن شویم پاره ای که برای تک تک صفحه های بدست میاید integer میباشد. همینطور سبب ساز می گردد که رکورد های مازاد در واپسین کاغذ تصویب شوند، خصوصا در مواقعی که تعداد رکوردهای مازاد کمتر از تعداد رکوردهایی میباشد که در هر برگه نشان داده میشود.
سرنوشت، پراپرتی currentPage را با ۱ مقدار دهی نخستین میکنیم.ما بدین موقعیت برای پی بردن برگه ای که اکنون فعال میباشد نیاز داریم.
آن‌گاه، ادامه داده و متدی برای ساخت تعداد صفحه های ساخت‌و‌ساز میکنیم. کامپوننت Pagination را همان گونه که در کد اکران داده گردیده تغییر و تحول دهید:
const LEFT_PAGE = 'LEFT';
const RIGHT_PAGE = 'RIGHT';
/**
* Helper method for creating a range of numbers
* range(1, 5) => [1, 2, 3, 4, 5]
*/
const range = (from, to, step = 1) => {
let i = from;
const range = [];
while (i <= to) {
range.push(i);
i += step;
}
return range;
}
class Pagination extends Component {
/**
* Let's say we have 10 pages and we set pageNeighbours to 2
* Given that the current page is 6
* The pagination control will look like the following:
*
* (1) < {4 5} [6] {7 8} > (10)
*
* (x) => terminal pages: first and last page(always visible)
* [x] => represents current page
* {...x} => represents page neighbours
*/
fetchPageNumbers = () => {
const totalPages = this.totalPages;
const currentPage = this.state.currentPage;
const pageNeighbours = this.pageNeighbours;
/**
* totalNumbers: the total page numbers to show on the control
* totalBlocks: totalNumbers + 2 to cover for the left(<) and right(>) controls
*/
const totalNumbers = (this.pageNeighbours * 2) + 3;
const totalBlocks = totalNumbers + 2;
if (totalPages > totalBlocks) {
const startPage = Math.max(2, currentPage - pageNeighbours);
const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
let pages = range(startPage, endPage);
/**
* hasLeftSpill: has hidden pages to the left
* hasRightSpill: has hidden pages to the right
* spillOffset: number of hidden pages either to the left or to the right
*/
const hasLeftSpill = startPage > 2;
const hasRightSpill = (totalPages - endPage) > 1;
const spillOffset = totalNumbers - (pages.length + 1);
switch (true) {
// handle: (1) < {5 6} [7] {8 9} (10)
case (hasLeftSpill && !hasRightSpill): {
const extraPages = range(startPage - spillOffset, startPage - 1);
pages = [LEFT_PAGE, ...extraPages, ...pages];
break;
}
// handle: (1) {2 3} [4] {5 6} > (10)
case (!hasLeftSpill && hasRightSpill): {
const extraPages = range(endPage + 1, endPage + spillOffset);
pages = [...pages, ...extraPages, RIGHT_PAGE];
break;
}
// handle: (1) < {4 5} [6] {7 8} > (10)
case (hasLeftSpill && hasRightSpill):
default: {
pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
break;
}
}
return [1, ...pages, totalPages];
}
return range(1, totalPages);
}
}
دراین جا دو اثبات LEFT_PAGE و RIGHT_PAGE را تعریف و تمجید میکنیم . این ثوابت برای نشانه دادن نقاطی که ما در دست گرفتن های برگه را برای جنبش به سمت چپ و راست به کار گیری میکنیم ، به کار گیری می گردد
همینطور تابع ()range را به مراد ساخت‌و‌ساز مشقت اعداد تعریف و تمجید کرده ایم . در حالتی که شما از لایبراری مثل Loadash به کار گیری می‌کنید ، می توانید از تابع _.range() که بوسیله Loadash مهیا شد‌ه‌است استعمال فرمایید . کد ذیل تفاوت فی مابین تابع rang() ای که ما تمجید کرده ایم و آن تابعی که در Lodash تعریف‌و‌تمجید گردیده است را نماد می‌دهد
range(1, 5); // returns [1, 2, 3, 4, 5]
_.range(1, 5); // returns [1, 2, 3, 4]
- ۰ ۰
- ۰ نظر