<div>
  <div class="content"></div>
  <div class="pager"></div>
</div>

<!-- 分頁上限 10  -->

.content {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 33.33%;
    padding: 20px;
    box-sizing: border-box;
    height: 200px;
    position: relative;
    background: #000;
    overflow: hidden;
  }

  .item {
    background-position:center;
    background-size:cover;
    &:before {
      content: attr(data-title);
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 2;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
    }
  }
}

img {
  max-width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pager {
  margin: 50px;
  ul {
    display: flex;
    justify-content: center;
  }
  a {
    display: inline-block;
    padding: 5px 8px;
    text-decoration: none;
    color: #f00;
    &.active {
      background: red;
      color: #fff;
    }
  }
}

let pager = document.querySelector(".pager");
let content = document.querySelector(".content");
let pageBtn = document.querySelector(".pager");

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

let foodList = {
  data: ""
};

let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://raw.githubusercontent.com/hexschool/KCGTravel/master/datastore_search.json",
  true
);
xhr.send(null);

xhr.onload = function () {
  let array = JSON.parse(xhr.responseText);
  foodList.data = array.result.records;
  viewItems();
  viewPages();
};

//目前頁數
let currentPage = 1;
//總頁數
let totalPages = 0;
//一頁有幾項
let itemOfPage = 15;
//總個數
let totalItems = 0;
//最多顯示頁數
let maxLastPages = 10;

//顯示項目
function viewItems() {
  totalItems = foodList.data.length;
  totalPages = Math.ceil(totalItems / itemOfPage);

  var items = "";
  if (currentPage >= totalPages) {
    currentPage = totalPages;
  } else if (currentPage <= 1) {
    currentPage = 1;
  }

  var maxData =
    currentPage * itemOfPage > totalItems ? totalItems : currentPage * itemOfPage;

  for (let i = (currentPage - 1) * itemOfPage; i < maxData; i++) {
    items += `<div class='item' style="background-image:url('${foodList.data[i].Picture1}')" data-title='${foodList.data[i].Name}'></div>`;
  }

  content.innerHTML = items;
}

function viewPages() {
  let prevBtn = "<li><a href='javascript:;' class='prevBtn'>上一頁</a></li>";
  let nextBtn = "<li><a href='javascript:;' class='nextBtn'>下一頁</a></li>";
  let liPager = "";
  if (totalPages > 1) {
    if (currentPage + 5 > 10 && currentPage + 5 < totalPages) {
      maxLastPages = currentPage + 5;
    } else {
      if (totalPages >= 10 && currentPage < 6) {
        maxLastPages = 10;
      } else {
        maxLastPages = totalPages;
      }
    }
    let start = maxLastPages - 10 + 1 > 1 ? maxLastPages - 10 + 1 : 1;

    for (let p = start; p <= maxLastPages; p++) {
      liPager += `<li>
<a href='javascript:;' class='pageBtn ${p === currentPage ? "active" : ""}'>${p}</a></li>`;
    }
    pager.innerHTML = `<ul>${prevBtn} ${liPager} ${nextBtn}</ul>`;
  } else {
    pager.innerHTML = "<div class='active'>1</div>";
  }
}

pageBtn.addEventListener(
  "click",
  function (e) {
    e.preventDefault();
    topFunction();
    // 切換頁碼
    if (e.target.textContent == "下一頁") {
      currentPage = currentPage == totalPages ? totalPages : (currentPage += 1);
    } else if (e.target.textContent == "上一頁") {
      currentPage = currentPage == 1 ? 1 : (currentPage -= 1);
    } else {
      currentPage = parseInt(e.target.textContent);
    }
    viewItems();
    viewPages();
  },
  false
);