react移动端table分页

import React from 'react';
import {
    SearchBar, Icon, Pagination
} from 'antd-mobile';
import './index.less';

export default class AddressBook extends React.Component {

    state = {
        list: [
            {
                name: '上海',
                sections: '分管美本',
                runnumber: '7266'
            },
            {
                name: '北京',
                sections: '美中一部',
                runnumber: '6595'
            },
            {
                name: '广州',
                sections: '市场部',
                runnumber: '6363'
            },
            {
                name: '南京',
                sections: '市场部',
                runnumber: '6363'
            },
            {
                name: '广东',
                sections: '网路营销部',
                runnumber: '6412'
            },
            {
                name: '深圳',
                sections: '网路营销部',
                runnumber: '6412'
            },
            {
                name: '山西',
                sections: '网路营销部',
                runnumber: '6412'
            },
            {
                name: '山东',
                sections: '网路营销部',
                runnumber: '6412'
            },
            {
                name: '厦门',
                sections: '网路营销部',
                runnumber: '6412'
            }
            ...
        ],
        current: 1, //当前页码
        pageSize: 5, //每页显示的条数
        goValue: 0,  //要去的条数index
        totalPage: 0,//总页数
        pagenum: 1,
        num: 0
    }

    componentWillMount() {
        //设置总页数
        this.setState({
            totalPage: Math.ceil(this.state.list.length / this.state.pageSize),
        })
        this.pageNext(this.state.goValue)
    }

    SelectOnchange(e) {
        console.log(e[e.options.selectedIndex].innerText);

    }

    // 搜索
    seachOnchange(val, a) {
        let newList = [...this.state.indexList];
        newList.filter((item) => {
            if (val === item.name) {
                console.log('item: ', item);
                return item
            }
        })
    }
    seachOnsubmit(e, v) {
        console.log(e, v);
    }

    // 部门排序
    sortCor(key, str) {
        return function (a, b) {
            return str === 'a' ? a[key].localeCompare(b[key], 'zh') : str === 'b' ? b[key].localeCompare(a[key], 'zh') : ''
        };
    }

    sectionSortUp(item, a) {
        let arrayCopy = [...this.state.indexList];
        console.log('arrayCopy: ', arrayCopy);
        arrayCopy.sort(this.sortCor(item, a));
        this.setState({
            indexList: arrayCopy
        })
    }

    sectionSortDown(item, b) {
        let arrayCopy = [...this.state.indexList];
        arrayCopy.sort(this.sortCor(item, b));
        this.setState({
            indexList: arrayCopy
        })
    }
    
    // 分机号排序
    rank(key) {
        return function (a, b) {
            console.log('a, b: ', a, b);
            if (a[key] < b[key]) return -1;
            if (a[key] > b[key]) return 1;
            return 0;
        };
    }

    rank2(key, str) {
        console.log('key,str: ', key, str);
        return function (a, b) {
            if (a[key] < b[key]) return 1
            if (a[key] > b[key]) return -1
            return 0;
        };
    }

    numberSortUp(item) {
        let arrayCopy = [...this.state.indexList];
        arrayCopy.sort(this.rank(item));
        this.setState({
            indexList: arrayCopy
        })
    }

    numberSortDown = (item) => {
        let arrayCopy = [...this.state.indexList];
        arrayCopy.sort(this.rank2(item));
        this.setState({
            indexList: arrayCopy
        })
    }


    //设置内容
    setPage = (num) => {
        this.setState({
            indexList: this.state.list.slice(num, num + this.state.pageSize)
        })
    }


    pageNext = (num) => {
        this.setPage(num)
    }

    //下一页
    setNext = () => {
        if (this.state.current < this.state.totalPage) {
            this.setState({
                num: this.state.num + this.state.pageSize,
                current: this.state.current + 1
            }, function () {
                console.log(this.state.current)
                this.pageNext(this.state.num)
            })
        }
    }

    //上一页
    setUp = () => {
        if (this.state.current > 1) {
            this.setState({
                num: this.state.num - this.state.pageSize,
                current: this.state.current - 1
            }, function () {
                console.log(this.state)
                this.pageNext(this.state.num)
            })
        }
    }



    render() {
        const { indexList } = this.state;
        console.log('indexList: ', indexList);

        return (
            <div className="addressbook" >
                <div style={{ textAlign: 'center', padding: '.2rem 0' }}>
                    <span style={{ fontSize: '.34rem', color: '#3cc51f' }}>通讯录</span>
                </div>
                <div className="jieguo">显示
          <select style={{ border: 'none' }} ref={val => this.sel = val} onChange={() => this.SelectOnchange(this.sel)}>
                        <option value="10">10</option>
                        <option value="10">20</option>
                        <option value="10">30</option>
                    </select>
                    项结果</div>
                <SearchBar placeholder="Search" maxLength={8}
                    onChange={(val, a) => this.seachOnchange(val, a)}
                    onSubmit={(indexList) => this.seachOnsubmit(indexList)}
                />
                <table border="0" cellSpacing="1" cellPadding="1" className="table" rules='rows'>
                    <tbody>
                        <tr>
                            <th>姓名</th>
                            <th>部门
                                <Icon type="up" size="xxs" onClick={() => this.sectionSortUp('sections', 'a')} />
                                <Icon type="down" size="xxs" className="downIcon" onClick={() => this.sectionSortDown('sections', 'b')} />
                            </th>
                            <th>分机号
                                <Icon type="up" size="xxs" onClick={() => this.numberSortUp('runnumber')} />
                                <Icon type="down" size="xxs" className="downIcon" onClick={() => this.numberSortDown('runnumber')} />
                            </th>
                        </tr>
                        {
                            indexList.map((item, index) => (
                                <tr key={index}>
                                    <td>{item.name}</td>
                                    <td>{item.sections}</td>
                                    <td>{item.runnumber}</td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
                <p className="sub-title">显示第1至5项结果，共{this.state.totalPage}项</p>
                <div className="change_page">
                    <span className="pages" onClick={this.setUp} >上一页</span>
                    <span>{this.state.current}页/ {this.state.totalPage}页</span>
                    <span className="pages" onClick={this.setNext}>下一页</span>
                </div>
            </div>
        )
    }
}