原生js实现分页逻辑

------记录前端学习-----
JS实现分页逻辑效果

逻辑分页是指从后台拿到所有数据，在前台页面实现分页，可以减少访问服务器的次数，但会添加内存

关键变量：
currentPage :当前页 maxVisiblePage :最大可视页数 beginPage :开始页数 endPage:最后一页数 totalPage :总页数 pageData :页码数据

html部分

          <div class="news">
            <ul class="newsList-ul">
              <!-- <li>
                <a>
                  <p class="p1">2012/12/21</p>
                  <p class="p2">????????</p>
                  <p class="p3">xxxxxxxxxxxxxxxxxxxxx...</p>
                </a>
              </li> -->
            </ul>
            <nav aria-label="Page navigation example" class="pages">
              <ul class="pagination">
                <!-- 
                <li class="pre-page page-item" style="display:none">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="#">1</a>
                </li>
                <li class="next-page page-item" style="display:none">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
               -->
              </ul>
            </nav>
          </div>

js部分

$(function () {
  //当前页
  var currentPage = Number(1)
  //最大可视页数
  var maxVisiblePage = Number(6)
  // 开始页数
  var beginPage = Number()
  // 最后一页数
  var endPage = Number()
  // 总页数
  var totalPage = Number()
  // 页码html架构数据
  var pageData = []
  // 每页显示的数据
  var lineNum = 10

  /**
   * 控制上一页 下一页
   */
  function handlePre_Next() {
    if (totalPage > 1 && totalPage <= maxVisiblePage) {
      // if (currentPage == totalPage) {
      //   $('.pre-page').show()
      // }
      if (currentPage == 1) {
        $('.next-page').show()
        $('.pre-page').hide()
      }
      if (currentPage == totalPage) {
        $('.pre-page').show()
        $('.next-page').hide()
      }
      if (currentPage > 1 && currentPage < totalPage) {
        $('.pre-page').show()
        $('.next-page').show()
      }
    }
    if (totalPage == 1) {
      $('.pre-page').hide()
      $('.next-page').hide()
    }
    if (totalPage > maxVisiblePage) {
      if (currentPage == 1) {
        $('.pre-page').hide()
        $('.next-page').show()
      }
      if (currentPage == totalPage) {
        $('.next-page').hide()
        $('.pre-page').show()
      }
      if (currentPage > 1 && currentPage < totalPage) {
        $('.pre-page').show()
        $('.next-page').show()
      }
    }
    $('.pre-page').click(function () {
      currentPage--
      if (currentPage <= 1) {
        currentPage = 1
      }
      createPagesInfo()
      handlePre_Next()
      loadNews()
    })
    $('.next-page').click(function () {
      currentPage++
      if (currentPage >= totalPage) {
        currentPage = totalPage
      }
      createPagesInfo()
      handlePre_Next()
      loadNews()
    })
  }

  /**
   * 点击页码切换当前页
   */
  function switchPageNumber() {
    $('.pages .pagination').on('click', '.page-item', function (e) {
      //点击触发事件
      currentPage = e.target.innerHTML
      createPagesInfo()
      handlePre_Next()
      loadNews()
    })
  }
  switchPageNumber()

  /**
   * 请求新闻数据
   */
  function loadNews() {
    $.ajax({
      url: './data/news.json',
      dataType: 'json',

      success: function (data) {
        pageData = data
        //新闻记录的总条数
        var newsTotalNum = pageData.length
        // 总页数
        totalPage = Math.ceil(newsTotalNum / 8)

        //每一页多少条数据
        var start = (currentPage - 1) * 8
        var end = start + 8
        var currentData = pageData.slice(start, end)

        var appendNewStr = ''
        for (var i = 0; i < currentData.length; i++) {
          var dt = currentData[i]
          appendNewStr += ' <li newsId=' + dt.newsId + '>\n\t<a href="' + unescape(dt.content).replace(/<\/?\w+\/?>/g, '') + '"' + ' target="_blank">' + '\n\t\t<p class="p1">' + dt.deployDate + '</p>\n\t\t<p class="p2">' + dt.subject + '</p>\n\t\t<p class="p3">' + dt.newsAbstract + '</p>\n\t</a>\n</li >\n'
        }
        $('.newsList-ul').html(appendNewStr)
        createPagesInfo()
        handlePre_Next()
      },
    })
  }
  loadNews()

  // 对第一个方块的页码和最后一个方块的页码做判断
  function get_begin_end_Page() {
    if (totalPage > maxVisiblePage) {
      if (currentPage >= 4 && currentPage <= 8) {
        beginPage = currentPage - 3
        endPage = beginPage + 5
      }
      if (currentPage >= 1 && currentPage <= 3) {
        beginPage = 1
        endPage = maxVisiblePage
      }
    }
    if (totalPage <= maxVisiblePage) {
      if (currentPage >= 1 && currentPage <= 6) {
        beginPage = 1
        endPage = totalPage
      }
    }
  }

  /**
   * 生成页码
   */
  function createPagesInfo() {
    if (currentPage > totalPage) {
      currentPage = totalPage
    } else if (currentPage < 1) {
      currentPage = 1
    }

    var pageStr = ''
    get_begin_end_Page()
    // 上一页按钮
    pageStr += '<li class="pre-page" style="display:none">\n\t<a class="page-link" href="#" aria-label="Previous">\n\t\t<span aria-hidden="true">&laquo;</span>\n\t</a>\n</li>'

    for (var i = beginPage - 1; i < endPage; i++) {
      pageStr += '\n<li class="page-item' + (currentPage == i + 1 ? ' active"' : '"') + '>' + '\n\t<a class="page-link" href="#">' + (i + 1) + '</a>\n</li>\n'
    }
    // 上一页按钮
    pageStr += '<li class="next-page" style="display:none">\n\t<a class="page-link" href="#" aria-label="Previous">\n\t\t<span aria-hidden="true">&raquo;</span>\n\t</a>\n</li>'

    $('.pages .pagination').html(pageStr)
  }
})

最终效果