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>
)
}
}
react移动端table分页
最新推荐文章于 2024-07-05 10:53:38 发布