JavaScript中的分頁顯示每頁元素的數量

Question

$ {totalItems} = 22 $ {pageSize} = 10

我想知道如何創建一個計算。

像這樣：第一個將顯示1-10個項目，如果我單擊下一頁將顯示：11-20，最后一個將是21-22。

因此基本上，每次單擊分頁的下一頁時，計算將顯示數字1 -10然后11-20。

有人可以為此提供一個JavaScript示例嗎？ 我唯一的值是22，所以我想像上面說的那樣進行計算。 並顯示在我的html中。

Answer 1

獲取頁面上第一項的索引

要獲得頁面的第一個索引，請將當前頁面號乘以每頁的項目數：

firstIndex = pageSize * pageNr

例如：

 console.log( "Start of each page:", [0, 1, 2].map(pageNr => 10 * pageNr) ); 

獲取頁面上最后一項的索引

要獲取頁面中最后一項的索引，我們可以使用此函數獲取下一頁的開始索引，然后減去1 ：

lastIndex = pageSize * (pageNr + 1) - 1

 console.log( "End of each page:", [0, 1, 2].map(pageNr => 10 * (pageNr + 1) - 1) ); 

找出有多少頁

為了查看需要渲染所有項目的頁面數量，我們將項目總數除以頁面大小，然后使用Math.ceil向上舍入：

nrOfPages = Math.ceil(nrOfItems / pageSize)

編寫實際代碼

現在我們已經涵蓋了基本的“數學”，我們可以開始編寫實際功能並創建一個小型應用程序。

根據數據的格式，您可以進行一些安全檢查，以確保不能：

• 請求的頁碼超出范圍，
• 請求一個負頁碼
• 輸入0或負數頁面大小，
• 等等

由於您沒有提供任何有用的操作，因此，我將跳過這些度量，並向您展示一個基於一組要分頁的項目的示例：

 function getPageStart(pageSize, pageNr) { return pageSize * pageNr; }; function getPageLabel(total, pageSize, pageNr) { const start = Math.max( getPageStart(pageSize, pageNr), 0 ); const end = Math.min( getPageStart(pageSize, pageNr + 1), total ); return `${start + 1} - ${end}`; } const itemsToShow = Array.from({ length: 22 }, (_, i) => `Item ${i + 1}`); const size = 10; const pages = Array.from( { length: Math.ceil(itemsToShow.length / size) }, (_, i) => getPageLabel(itemsToShow.length, size, i) ) console.log(pages);