如何用JavaScript實現數組分頁？

ello，大家好！今天要和大家分享一個非常實用的小技巧——如何在業務場景中使用JavaScript對數組進行分頁展示。無論你是前端萌新，還是正在努力提升自己技能的小伙伴，這篇文章都會對你有所幫助哦！

業務需求

想象一下，我們正在開發一個購物網站，需要展示大量的商品數據。如果一下子展示太多，用戶體驗肯定不好。這時候分頁展示就顯得尤為重要了！如何用JavaScript實現這一需求呢？別急，我們一步步來。

JavaScript數組分頁的實現

其實，實現數組分頁非常簡單。我們可以借助JavaScript的slice方法來達到目的。下面是具體的代碼示例：

const arr = Array(100).fill().map((_, i) => i); // 創建一個包含100個元素的數組
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
};

// 示例：分頁展示
console.log(paginate(arr, 10, 1)); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(paginate(arr, 10, 2)); // [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
console.log(paginate(arr, 10, 3)); // [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

代碼講解

創建數組：我們用Array(100).fill().map((_, i) => i)創建了一個包含100個元素的數組，每個元素的值等于它的索引。
定義分頁函數：paginate函數接收三個參數：

array：需要分頁的數組
pageSize：每頁展示的元素數量
pageNumber：當前頁碼，從1開始計數

實現分頁邏輯：通過slice方法，根據pageNumber和pageSize計算出要返回的數組片段。具體來說，第一個參數是(pageNumber - 1) * pageSize，第二個參數是pageNumber * pageSize。

應用示例

通過console.log輸出結果，我們可以清楚地看到分頁后的數組片段：

console.log(paginate(arr, 10, 1)); // 第一頁：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(paginate(arr, 10, 2)); // 第二頁：[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
console.log(paginate(arr, 10, 3)); // 第三頁：[20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

結束

看吧！實現分頁是不是很簡單？只要幾行代碼，就能輕松搞定數組的分頁展示。希望這個小技巧能為你的項目帶來幫助！如果你還有其他關于JavaScript的問題或想學習更多的編程知識，歡迎在評論區留言，我們一起討論進步哦！

覽器js做簡單分頁（JQuery）

注意，正經需求千萬不要用js在瀏覽器分頁，數據太多瀏覽器壓力會很大，實測4W張圖片瀏覽器卡死，如果不想加班老老實實在服務器端做分頁吧！
此js分頁適用于數據量較小的情況
使用：引入js文件，參考https://www.jq22.com/jquery-info10344按文件內結構引入相關資源創建div 在此div上初始化分頁
更多模板訪問http://www.jq22.com

一篇文章講解“模型-內置標簽之定義標簽”，本篇文章講解“雜項-分頁之分頁實現”。

一、分頁實現

ThinkPHP5.1內置了分頁實現，要給數據添加分頁輸出功能變得非常簡單。

1. 使用Db類實現分頁

1）使用Db類查詢的時候調用paginate方法：

①新建Index控制器，并新建dbpage方法

②新建dbpage.html模板，并在模板中展示數據

預覽：

2）單獨賦值分頁輸出的模板變量

①在ThinkPHP3版本時，分頁模板與數據是單獨分開的，在ThinkPHP5中也支持單獨的分頁模板。

②在dbpage.html模板中，輸出分頁模板

預覽：

注意：
1. 默認情況下，生成的分頁輸出是完整分頁功能，帶總分頁數據和上下頁碼，分頁樣式只需要通過樣式修改即可，完整分頁默認生成的分頁輸出代碼為：
<ul>
<li>
<span>?</span>
</li>
<li>
<span>1</span>
</li>
<li>
<a href="url?page=2">2</a>
</li>
</ul>

3）單獨獲取總數據數

預覽：

2. 模型的分頁查詢

以上使用的是Db類的分頁查詢方式，也可以使用模型進行分頁查詢。

①新建User模型，并新建getList方法，獲取分頁查詢數據

②在Index控制器中，新建modelpage方法，調用模型中的getList方法

③新建modelpage.html模板，在模板中輸出數據

預覽：

注意：
1. 使用模型類實現分頁與Db類實現分頁相同，其中Db類可以獲取的總頁數、單獨輸出分頁在模型類中依舊可以實現。

3. 傳入總記錄數

支持傳入總記錄數而不會自動進行總數計算。

①在Index控制器中，新建totalnum方法

②新建totalnum.html模板，在模板中輸出數據

注意：
1. 對于UNION查詢以及一些特殊的復雜查詢，推薦使用這種方式首先單獨查詢總記錄數，然后再傳入分頁方法。

4. 分頁后數據處理

支持分頁類后數據直接each遍歷處理，方便修改分頁后的數據，而不是只能通過模型的獲取器來補充字段。

1）使用模型進行分頁后數據處理

①在Index控制器中，新建eachnum方法

②新建totalnum.html模板，在模板中輸出數據

預覽：

2）使用Db類進行分頁后數據處理

如果是Db類操作分頁數據的話，each方法的閉包函數中需要使用返回值。

①在Index控制器中，新建dbeach方法

預覽：?

ThinkPHP5連載為卓象程序員原創，轉載請聯系卓象程序員

關注卓象程序員，定期發布技術文章

下一篇講解“雜項 - 分頁之簡潔分頁”

在線咨詢

上一篇：亞馬遜100問｜“長描述”要這樣寫，用戶看完才有購買欲望
下一篇：在網頁開發中，我們需要掌握的常用HTML標簽有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商