基本的分页功能，JavaScript部件是否有逻辑问题？

Question

Basic分页函数，JavaScript部件是否有逻辑问题？

非常基本的寻呼功能。我想知道代码的逻辑中是否存在一些问题。我觉得JS代码有点臃肿。

  Go Coding!
  
    * {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 12px;
      list-style: none;
      text-decoration: none;
    }

    body {
      padding: 20px;
    }

    .title {
      font-size: 36px;
      color: #f80;
    }

    .title>small {
      font-size: 24px;
      color: #ccc;
      vertical-align: 4px;
    }

    .tip {
      color: #999;
    }

    .emp {
      color: #f80;
    }

    .list>li {
      padding: 6px;
      border-bottom: 1px solid #eee;
    }

    .pagination {
      padding: 4px;
    }

    .pagination a {
      display: inline-block;
      padding: 4px 8px;
      color: #00c;
    }

    .pagination a.active {
      font-weight: bold;
      color: #f80;
      background-color: #eee;
    }

    .pagination .tip {
      margin: 0 0 0 10px;
    }
  


  
  
  
    let data = {
      "list": [
        { "id": 1, "title": 2001 },
        { "id": 2, "title": 2002 },
        { "id": 3, "title": 2003 },
        { "id": 4, "title": 2004 },
        { "id": 5, "title": 2005 },
        { "id": 6, "title": 2006 },
        { "id": 7, "title": 2007 },
        { "id": 8, "title": 2008 },
        { "id": 9, "title": 2009 },
        { "id": 10, "title": 2010 },
        { "id": 11, "title": 2011 },
        // { "id": 12, "title": 2012 },
        // { "id": 13, "title": 2013 },
        // { "id": 14, "title": 2014 },
        // { "id": 15, "title": 2015 },
        // { "id": 16, "title": 2016 },
        // { "id": 17, "title": 2017 },
        // { "id": 18, "title": 2018 },
        // { "id": 19, "title": 2019 },
        // { "id": 20, "title": 2020 },
        // { "id": 21, "title": 2021 },
      ]
    }

    let list = data.list;
    console.log(`Data Length: ${list.length}`);

    pagination({
      "current-page": 1,
      "page-size": 2,
    });

    function pagination(par) {
      let pagination = document.querySelector(".pagination");
      let listBox = document.querySelector(".list");
      let currentPage = par["current-page"];
      let pageNums = par["page-nums"] || 5;
      let pageSize = par["page-size"];
      let num = data.list.length;
      let totalPage = 0;

      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }

      let sliceStart = (currentPage - 1) * pageSize;
      let sliceEnd = currentPage * pageSize;
      sliceEnd = sliceEnd > num ? num : sliceEnd;

      let dataSlice = data.list.slice(sliceStart, sliceEnd);
      let listText = "";
      for (let item of dataSlice) {
        listText += `
          <li>
            <h5 class="title">
              <small>${item.id} - </small>${item.title}
            </h5>
          </li>
        `;
      }
      listBox.innerHTML = listText;

      let htmlText = "";
      if (currentPage > 1) {
        htmlText += `
          <a href="#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">
            &#8592;
          </a>
        `;
      }

      let start = currentPage - Math.floor(pageNums / 2);
      let end = currentPage + Math.floor(pageNums / 2);

      if (end < pageNums) {
        end = pageNums;
      }

      if (end > totalPage) {
        end = totalPage;
      }

      if (end - start != pageNums - 1) {
        start = end - pageNums + 1;
      }

      if (start < 1) {
        start = 1;
      }

      for (let i = start; i <= end; i++) {
        htmlText += `
          <a class="${currentPage === i ? 'item-link active' : 'item-link'}" href="#" data-index="${i}" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
            ${i} 
          </a>
        `;
      }

      if (currentPage < totalPage) {
        htmlText += `
          <a href="#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">
            &#8594;
          </a>
        `;
      }

      htmlText += `
        <span class="tip">
          <b class="emp">${currentPage}</b> / ${totalPage}
        </span>
      `;
      pagination.innerHTML = htmlText;
    }

Answer 1