js分頁插件的使用（js前端分頁完整代碼）

大多數web應用程序背后的思想都是從數據庫中獲取數據，并以最好的方式將數據呈現給用戶。當我們處理數據時，有時最好的呈現方法就是創建一個列表。

根據數據量及其內容，我們可以決定一次顯示所有內容(很少)，或者只顯示一個更大數據集的特定部分(更有可能)。只顯示部分現有數據的主要原因是，我們希望盡可能保持應用程序的性能，并避免加載或顯示不必要的數據。

如果我們決定以“chunks(塊)”的形式顯示數據，那么我們需要一種方法來導航該數據集合。對一組數據進行導航的最常見的兩種方法是:

第一個是分頁，這是一種將數據集分割為特定數量的頁面的技術，它可以避免用戶被一個頁面上的數據量淹沒，并允許用戶一次查看一組結果。以你正在閱讀的這個博客為例。主頁列出了最新的10篇文章。查看下一組最新的帖子需要單擊一個按鈕。

第二種常見的技術是無限滾動，如果你曾經在Facebook或Twitter上瀏覽過時間軸，那你可能對無限滾動很熟悉。

蘋果新聞app也使用了無限滾動技術來瀏覽文章列表。

在本文中，我們將更深入地研究第一種類型。分頁是我們幾乎每天都會遇到的事情，但它并不是不重要的。這是一個很好的組件應用實例，所以這也正是我們要做的。我們將按步驟創建一個負責顯示該列表的組件，并在單擊要顯示的特定頁面時觸發獲取其他文章的操作。換句話說，我們正在用Vue.js創建一個分頁組件，就像下面這樣:

我們一起來看一看這些步驟。

#步驟1:使用Vue創建ArticlesList組件

我們從創建一個組件開始，該組件將顯示文章列表(但目前還沒有進行分頁)。我們稱之為ArticlesList。在該組件模板中，我們將遍歷文章的集合，并將單個文章項目傳遞給每一個ArticleItem組件。

在該組件的腳本部分，我們將設置初始數據:

• articles: 這是一個空數組，填充了從mounted鉤子上的API獲取的數據。
• currentPage: 用于操作分頁。
• pageCount : 這是在基于API響應的mounted鉤子上計算的頁面總數。
• visibleItemsPerPageCount: 這是我們希望在一個頁面上看到的文章數量。

在這個階段，我們只獲取文章列表的第一頁。這將給我們列出兩篇文章:

#步驟2: 創建 pageChangeHandle 方法

現在，我們需要創建一個方法來加載下一頁、上一頁或選定的頁面。

在pageChangeHandle方法中，在加載新文章之前，我們根據傳遞給方法的一個屬性來更改currentPage值，并從API獲取對應于特定頁面的數據。接收到新數據后，我們將用包含新文章頁面的新數據替換現有的articles數組。

#步驟3:創建一個組件來觸發頁面更改

我們已經有了pageChangeHandle方法，但是我們并沒有在任何地方觸發它。我們需要創建一個負責觸發它的組件。

這個組件應該做以下事情:

1. 允許用戶進入下一頁/上一頁。
2. 允許用戶從當前選定的頁面跳轉到一個范圍內的特定頁面。
3. 根據當前頁面更改頁碼的范圍。

如果我們把它畫出來，它看起來是這樣的:

我們繼續!

#要求1:允許用戶進入下一頁或上一頁

我們的BasePagination將包含兩個按鈕，負責轉到下一頁和上一頁。

該組件將接受來自父組件的currentPage和pageCount屬性，并在下一頁或上一頁按鈕被單擊時向父組件返回適當的操作。它還將負責在我們位于第一頁或最后一頁時禁用按鈕，以防止移動出現有集合。

我們將在ArticlesList組件中的ArticleItems下面呈現該組件。

這是比較容易的部分?，F在我們需要創建一個頁面數量的列表，每個頁碼允許我們選擇一個特定的頁面。頁面的數量應該是可自定義的，我們還需要確保不顯示任何可能導致我們超出集合范圍的頁面。

#要求2:允許用戶進入一個范圍內的特定頁面

我們從創建一個將用作單個頁碼的組件開始。我稱之為BasePaginationTrigger。它將做兩件事:顯示從BasePagination組件傳遞的頁碼，并在用戶單擊特定的頁碼時發出事件。

然后，這個組件將在下一頁和上一頁按鈕之間的BasePagination組件中呈現。

在腳本部分，我們需要添加另一個方法(onLoadPage)，該方法將在loadPage事件從觸發器組件中發出時觸發。此方法將接收已單擊的頁碼，并將事件發送到ArticlesList組件。

然后，在ArticlesList中，我們將監聽該事件并觸發pageChangeHandle方法，該方法將獲取新頁面的數據。

#要求3:根據當前頁面更改頁碼范圍

現在我們有一個單一的觸發器，它顯示當前頁面并允許我們再次獲取相同的頁面。這很沒用，你不覺得嗎? 我們來使用一下新創建的觸發器組件。我們需要一個頁面列表，該列表允許我們從一個頁面跳轉到另一個頁面，而不需要遍歷中間的頁面。

我們還需要確保以一種良好的方式顯示頁面。我們總是希望在分頁列表中顯示第一個頁面(在最左邊)和最后一個頁面(在最右邊)，然后在它們之間顯示剩余的頁面。

我們有三種可能的情況:

1. 所選頁碼小于列表寬度的一半(如1 – 2 – 3 – 4 – 18)
2. 所選頁碼大于從列表末尾開始計算的列表寬度的一半(例如1 – 15 – 16 – 17 – 18)
3. 所有其他情況(例如1 – 4 – 5 – 6 – 18)

為了處理這些情況，我們將創建一個計算屬性，該屬性將返回一個應該在下一頁和上一頁按鈕之間顯示的數字數組。為了使這個組件更加可重用，我們將接受一個visiblePagesCount屬性，該屬性將指定在分頁組件中多少頁面應該可見。

在逐個研究這些情況之前，我們先創建幾個變量:

• visiblePagesThreshold:- 告訴我們有多少頁面來自中心(選定的頁面應該被顯示)
• paginationTriggersArray: 將用來填充頁碼的數組
• visiblePagesCount: 創建一個具有所需長度的數組

現在我們來看一看每個場景。

場景1: 所選頁碼小于列表寬度的一半

我們讓第一個元素總是等于1。然后我們遍歷列表，為每個元素添加一個索引。最后，我們添加最后一個值并將其設置為等于最后一頁的頁碼——如果需要，我們希望能夠直接跳到最后一頁。

場景2: 所選頁碼大于從列表末尾開始計算的列表寬度的一半

與前面的場景類似，我們從最后一個頁面開始，遍歷列表，這次我們從每個元素中減去索引。然后我們反轉數組以得到正確的順序，并將1推入數組的第一個位置。

場景3: 其他所有情況

我們知道列表的中心應該是什么數字:當前頁面。我們也知道這個列表應該有多長。這允許我們得到數組中的第一個數字。然后，我們通過向每個元素添加索引來填充列表。最后，我們將1推入數組的第一個位置，并將最后一個數字替換為我們最后一個頁碼。

這就涵蓋了我們所有的場景!我們現在只剩下最后一步了。

#步驟5:在BasePagination組件中呈現數字列表

既然我們確切地知道了我們想要在分頁中顯示的數字，那我們需要為分頁中的每一個數字呈現一個觸發器組件。

我們使用一個v-for指令來實現。我們還添加了一個條件類，它將處理當前頁面的選擇。

這樣我們就完成了!我們剛剛使用Vue構建了一個很好的可重用分頁組件。

#什么時候應該避免這種模式

盡管這個組件非常貼心，但它并不是針對所有涉及分頁的用例的靈丹妙藥。

例如，對于連續流傳輸且結構相對扁平的內容，避免這種模式可能是一個好主意，比如每個條目都位于相同的層次結構級別，并且用戶對其感興趣的機會也類似。換句話說，就是不太像一篇有多個頁面的文章的東西，而更像主導航的東西。

另一個例子是瀏覽新聞，而不是尋找特定的新聞文章。我們不需要確切地知道新聞在哪里，也不需要知道我們滾動多少才能看到特定的文章。

#就到這里!

希望這個模式在你的項目中能有用武之地，無論是對于一個簡單的博客、一個復雜的電子商務網站，還是介于兩者之間的站點。分頁可能是一件痛苦的事情，但是擁有一個不僅可以重用而且可以考慮用于大量場景的模塊化的模式可以使分頁更容易處理。