前端分頁邏輯

因爲cs被單位屏蔽，故把本身作的那些筆記搬過來。有時候解決的問題若是不記錄的話，忘了豈不是很惋惜。

參考連接：https://segmentfault.com/a/11... 方糖先生

下面直接附上源碼，在基礎上增長了上一頁，下一頁效果。

/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const isNumber = (num) => {
  return typeof num === 'number';
}
class Pagination extends  React.Component {
  constructor (props) {
      super(props);
  }
  // 點擊回調事件    
  handleClick (item) {
    // 父組件回調事件
    this.props.cb(item);
  }
  next () {
    let num = this.props.cur+1
    this.props.cb(num)
  }
  prev() {
    let num = this.props.cur - 1
    this.props.cb(num)
  }
  render () {
      let {cur, space, all} = this.props;
      let pgObj = [];
      // 給不一樣的元素 賦值class
      const checkClass = (role, active) => {
          const defaultClass = 'pg-span';
          if (active) {
              return    `${defaultClass} active`
          }
          switch (role) {
              case 0: {
                  return `${defaultClass}`
              }
              case 1: {
                  return `${defaultClass}`
              }
              default: {
              }
          }
      }

      
      // 初始檢查
      if (all < space) {
        space =  all
      }
      if (cur <= 0) {
          cur = 0
      }
      if (cur >= all) {
      cur = all
      } 
      // 階段判斷
      if (cur < space) {
          if (space === all) {
              for (let i = 1; i <= space; i++) {
                  pgObj.push({
                      page: i,
                      role: 0,
                      key: i
                  })
              }
          } else {
              for (let i = 1; i <= space; i ++) {
                  pgObj.push({
                      page: i,
                      role: 0,
                      key: i
                  })
              }
              pgObj.push({
                  page: '...',
                  role: 1,
                  key: 'next'
              })
              pgObj.push({
                  page: all,
                  role: 0,
                  key: all
              })
          }
      } else if (cur >= space && cur <= all - space + 1) {
          let odd = parseInt(space / 2);
          pgObj.push({
              page: 1,
              role: 0,
              key: 1
          });
          pgObj.push({
              page: '...',
              role: 1,
              key: 'pre'
          });
          for (let i = cur - odd; i <= cur + odd ; i ++) {
              pgObj.push({
                  page: i,
                  role: 1,
                  key: i
              })
          }
          pgObj.push({
              page: '...',
              role: 1,
              key: 'next'
          });
          pgObj.push({
              page: all,
              role: 1,
              key: all
          })
      } else {
          pgObj.push({
              page: 1,
              role: 0,
              key: 1
          });
          pgObj.push({
              page: '...',
              role: 1,
              key: 'pre'
          });
          for (let i = all - space + 1; i <= all; i ++) {
              pgObj.push({
                  page: i,
                  role: 0,
                  key: i
              })
          };
      }
      console.log(pgObj,'pg')
      return (
          <section>
              <span className="pg-span" onClick={()=>this.prev()} >上一頁</span>
              {
                pgObj.map(item =>
                  (<span key={item.key}
                    className={checkClass(item.role, item.page === cur)}
                    onClick={() => {this.handleClick(item)}}
                    >
                      {item.page}
                      </span>))
              }
              <span className="pg-span" onClick={()=>this.next()}>下一頁</span>
          </section>
      )
  }
  
}
class Root extends React.Component {
constructor (props) {
    super(props);
    this.state = {
      cur: 1
    };
    this.handlePagination = this.handlePagination.bind(this);
}
handlePagination (item) {
    const {page} = item;
    if(typeof item === 'number') {
      this.setState({
        cur: item
    })
      if(item<=1){
        this.setState({
          cur:1
        })
      }
      if(item>=100) {
        this.setState({
          cur:100
        })
      }
    }
    if (isNumber(page)) {
        this.setState({
            cur: page
        })
    }
}
render() {
  let {cur} = this.state;
  console.log(cur);
  
  return  (
    <div>
       <Pagination cur={cur} all={100} space={8} cb={this.handlePagination} />
    </div>
  )
}

};
ReactDOM.render(
<Root></Root>,
document.getElementById('root')
);

/index.css

.pg-span {
  display: inline-block;
  padding: 2px 0;
  width: 30px;
  margin: 0 5px;
  cursor: pointer;
  background: #f4f4f5;
  color: #606266;
  text-align: center;
  cursor: pointer;
}
.active {
  background: #409eff;
  color: #fff;
  cursor: pointer;
}

思路分析

三個重要指標：

cur:當前頁面
space 可展現的頁碼數量
all 總頁碼數量

cur < space 與首相連
cur>space && cur<all-space 中間區域
cur>all-space 與尾相連
以此判斷是否添加 「…」

另外

role，checkclass 的設定不是太理解，可能有其餘的考量我不清楚。總之我按照我理解方便的改了一下。去掉這兩個，改爲push基本類型值，class使用三元表達式。

class Pagination extends  React.Component {
  constructor (props) {
      super(props);
  }
  // 點擊回調事件    
  handleClick (item) {
    // 父組件回調事件
    this.props.cb(item);
  }
  next () {
    let num = this.props.cur+1
    this.props.cb(num)
  }
  prev() {
    let num = this.props.cur - 1
    this.props.cb(num)
  }
  render () {
      let {cur, space, all} = this.props;
      let pgObj = [];
      // 初始檢查
      if (all < space) { //總頁數=可展現數
        space =  all
      }
      if (cur <= 0) { //左邊界處理
          cur = 0
      }
      if (cur >= all) { //右邊界處理
      cur = all
      } 
      // 階段判斷
      if (cur < space) { //與首相連
          if (space === all) { //不顯示...狀況
              for (let i = 1; i <= space; i++) {  
                  pgObj.push(i)
              }
          } else { //顯示...狀況
              for (let i = 1; i <= space; i ++) {
                  pgObj.push(i)
              }
              pgObj.push("...")
              pgObj.push(all)
          }
      } else if (cur >= space && cur <= all - space + 1) { //首尾不沾的狀況
          let odd = parseInt(space / 2);
          pgObj.push(1);
          pgObj.push("...");
          for (let i = cur - odd; i <= cur + odd ; i ++) {
              pgObj.push(i)
          }
          pgObj.push("...");
          pgObj.push(all)
      } else {
          pgObj.push(1);
          pgObj.push("...");
          for (let i = all - space + 1; i <= all; i ++) {
              pgObj.push(i)
          };
      }
      console.log(pgObj,'pg')
      return (
          <section>
              <span className="pg-span" onClick={()=>this.prev()} >上一頁</span>
              {
                pgObj.map(item =>
                  (<span key={item.key}
                    className={item === cur ? "pg-span active" : "pg-span"}
                    onClick={() => {this.handleClick(item)}}
                    >
                      {item}
                      </span>))
              }
              <span className="pg-span" onClick={()=>this.next()}>下一頁</span>
          </section>
      )
  }
}