1. 昨天的分頁，我們寫了一個 changePage 的 function，不同於以往的 function 都只帶入1個參數，這次的參數會帶 2 款，**一個叫做 page **，也就是按鈕按到第 1 頁，function 會計算之後出現 1～10 的資料；按鈕按到第 2 頁，會出現 11 ～ 20 的資料，**一個叫做 data **，主要是把全域的 ary 資料帶入 funtion。

2. 要帶入 2 個參數，我們可以在昨天的 addEventListener 建立 function 名稱時，後方加入 .bind，那我們就直接來改昨天的 addEventListener 囉：

btn[i].addEventListener('click', changePage.bind(this,(i+1),ary);

3. 除了改昨天的 addEventListener ，我們還需要改changePagefunciton:

function changePage (page,data){}

4. 重頭戲當然就落在寫 changePage 這個 funcation 裡，讓我們先在 function 裡來 var 1個叫做 items 的變數，這個變數賦予它 10 這個數字，主要是代表每頁出現 10 筆資料：

var items = 10;

5. 再來我們按鈕按下 1，會出現 1～10筆資料，但陣列索引值卻是 0～9 的資料，以此類推，來寫出每頁起始值及結束值的索引值公式，：

var pageIndexStart = (page-1)*items
var pageIndexEnd = page * items

6. 給個空字串，呆回要塞資料用：

var str='';

7. 一個 for 迴圈：

for (var i=pageIndexStart;i<pageIndexEnd;i++){
    str+=`<div class="box">${data[i]}</div>`
};

8. 塞字串進入 HTML：

document.querySelector('.content').innerHTML=str;

9. 按下網頁上按鈕，應該成功囉：

10. 不過還有一些小地方要修正，讓我們按到第 4 顆按鈕瞧瞧：

11. 因為只有 36 筆資料，36之後沒有資料，所以出現錯誤，在 for 迴圈裡面加個判斷式吧：

if (i>=data.length){break;}

12. 好開心修好了，不過還有件貼心事要做，我們的監聽是在按鈕被 click 之後才會啟動，所以我們必需在網頁載入時先預設第 1 頁會自動出現，否則使用者會很困惑為什麼網頁一開始載入時是空資料：

changePage(1,ary);

13. 雙手合掌，完成！