js分頁組件

class Pagination {
  constructor({ id, total, pageSize, changeCallBack }) {
    this.total = total || 1 // 數據總數
    this.pageSize = pageSize || 8 // 每頁條數
    this.pageIndex = 1 // 當前頁碼
    this.pageNumber = Math.ceil(this.total / this.pageSize) // 總頁碼
    this.paginationEl = document.querySelector('#' + id)
    this.changeCallBack = changeCallBack
    this.init()
  }
  init() {
    this.renderPagination()
    this.bindEvent()
  }
  renderPagination() {
    this.paginationEl.innerHTML = ''
    let html = []
    html.push(this.createPrevBtn())
    html.push(this.createPageNumber())
    html.push(this.createNextBtn())
    let ul = document.createElement('ul')
    ul.className = 'pagination'
    ul.innerHTML = html.join(' ')
    this.paginationEl.appendChild(ul)
  }
  bindEvent() {
    this.bindPageNumberEvent()
    this.bindPrevBtnEvent()
    this.bindNextBtnEvent()
  }
  bindPageNumberEvent() {
    let painationList = this.paginationEl.querySelectorAll('.pagination_item')
    painationList.forEach(pagination => {
      pagination.addEventListener('click', (e) => {
        this.pageChange(Number(e.currentTarget.innerHTML))
      }, false)
    })
  }
  bindPrevBtnEvent() {
    let Prev = this.paginationEl.querySelector('.last_page')
    Prev.addEventListener('click', () => {
      if (this.pageIndex === 1) {
        return
      }
      this.pageChange(--this.pageIndex)
    }, false)
  }
  bindNextBtnEvent() {
    let Next = this.paginationEl.querySelector('.next_page')
    Next.addEventListener('click', () => {
      if (this.pageIndex === this.pageNumber) {
        return
      }
      this.pageChange(++this.pageIndex)
    }, false)
  }
  renderNumber(pageNumber,i) {
    if (this.pageIndex === i) {
      return `<li class="pagination_item active">${i}</li>`
    } else {
      return `<li class="pagination_item">${i}</li>`
    }
  }
  createPageNumber() {
    let pageNumber = ''
    // 總頁碼小於等於10的時候可以全部渲染,否則需要渲染省略號
    if(this.pageNumber <= 10){
      for (let i = 1; i <= this.pageNumber; i++) {
        pageNumber += this.renderNumber(pageNumber,i)
      }
    } else {
      if(this.pageIndex < 6 ){
        let i = 1
        while ( i < 6){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
        pageNumber += `<li class="pagination_item">...</li>`
        i = this.pageNumber - 3
        while ( i <= this.pageNumber){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
      }else if(this.pageIndex >= 6 && this.pageIndex < this.pageNumber - 4){
        let i = 1
        while ( i < 3){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
        pageNumber += `<li class="pagination_item">...</li>`
        i = this.pageIndex - 1
        while ( i <= this.pageIndex + 1){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
        pageNumber += `<li class="pagination_item">...</li>`
        i = this.pageNumber - 2
        while ( i <= this.pageNumber){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
      }else {
        let i = 1
        while ( i < 5){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
        pageNumber += `<li class="pagination_item">...</li>`
        i = this.pageNumber - 4
        while ( i <= this.pageNumber){
          pageNumber += this.renderNumber(pageNumber,i)
          i++
        }
      }
    }

    return pageNumber
  }
  createPrevBtn() {
    if (this.pageIndex === 1) {
      return `<li onclick="" class="last_page">
        <img src=翻頁箭頭的圖片鏈接" alt="">
      </li>`
    } else {
      return `<li class="last_page">
        <img src="翻頁箭頭的圖片鏈接" alt="">
      </li>`
    }
  }
  createNextBtn() {
    if (this.pageIndex === this.pageNumber) {
      return `<li class="next_page">
        <img src="翻頁箭頭的圖片鏈接" alt="">
      </li>`
    } else {
      return `<li class="next_page">
        <img src="翻頁箭頭的圖片鏈接" alt="">
      </li>`
    }
  }
  pageChange(pageIndex) {
    this.pageIndex = pageIndex
    this.init()
    if (typeof this.changeCallBack === 'function') {
      this.changeCallBack(this.pageIndex)
    }
  }
}

調用

<div id='pagination'></div>
  
  <script>
    new Pagination({
      id:'pagination',
      total:200,
      pageSize:8,
    })
  </script>

效果