表格分页

// An highlighted blocktableOption: {columns: [{title: '目标类型', key: 'categoryDisplay', dataIndex: 'categoryDisplay',width: '200px'},{title: '分公司', key: 'companyName', dataIndex: 'companyName',width: '400px'},{title: '年月', key: 'yearMonth', dataIndex: 'yearMonth',width: '200px'},{title: '产品分类', key: 'productionTypeName', dataIndex: 'productionTypeName',width: '200px'},//{title: '产品分类值', key: 'productionType', dataIndex: 'productionType',width: '200px'},{title: '业绩目标（万）', key: 'performanceObjectivesAmount', dataIndex: 'performanceObjectivesAmount',width: '200px'},{title: 'PK目标（万）', key: 'pkTargetAmount', dataIndex: 'pkTargetAmount',width: '200px'},],dataSource: [], //表格显示的总数据loading: false,scroll: {x: 1600},pagination: {current: 1, pageSize: 10, total: 0, showTotal: total => `共 ${total} 条`}},

 /*** 初始化列表*/loadTable() {let self = this, {tableOption} = this.state;tableOption.loading = true;self.setState({tableOption});api.post(APIS.achievementManageSearch+'?current='+tableOption.pagination.current+'&pageSize='+tableOption.pagination.pageSize, {data: {canshu:666}}).then(function(response){tableOption.dataSource = response.data.data.records;tableOption.pagination.total = response.data.data.total;}).finally(()=>{tableOption.loading = false;self.setState({tableOption});});}//表格点击页数事件onTableChange(pagination) {if (pagination.current) {let { tableOption } = this.state;tableOption.pagination.current = pagination.current;tableOption.pagination.pageSize = pagination.pageSize;this.setState({ tableOption });}this.loadTable();};

   componentWillReceiveProps(nextProps) {if (this.props.match.params.id !== nextProps.match.params.id) {this.Id = nextProps.match.params.id;this.loadTable();}}<Table onChange={this.onTableChange.bind(this)}  {...tableOption} bordered />

antd 表格分页功能相关推荐

antd表格分页控件显示英文page
antd:[2021-1-26]解决表格分页控件英文显示的问题--使用之表格与分页控件的使用: 官网描述: Table组件pagination属性描述:object为Pagination组件api的属 ...
手动实现表格分页功能
在浏览器端实现分页,一次性获取全部数据,根据当前页数和每页记录数选择性显示/隐藏 <td colspan="9"><span class="pull-l ...
element表格分页功能
element表格分页效果图 1.添加表格和分页组件 <el-table stripe :data="tableData.slice((currentPage-1)*pagesize ...
antd table分页,关于react的antd表格分页的问题
最近用react的框架做了一个表格比较多的数据库,里面涉及到了以一些分页的问题,目前我还是一个前端的小白.通过自己看文档何请教一位大神才解决了这个问题,现在在这里记录一下自己的心得.自己写的应该是比较 ...
如何在vue中使用表格分页功能
直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-tablev-loading=&quo ...
vue 实现简单表格分页功能
使用框架实现表格展示和跳转功能,一直不懂原理.所以自己写一个简单的,加深理解. 布局分为2块,上面是表格展示数据,下面是点击按钮跳转. 效果图: 代码: <!DOCTYPE html> & ...
基于Flask实现Layui表格分页功能
分组查询语法 Mysql分页查询和联合查询_Stillboring的博客-CSDN博客 Flask view代码 #获取学生信息 def getStuInfoList():#获取页数pageNum = ...
使用element-ui实现表格分页
vue+element-ui实现表格分页前言表格分页一.前端分页 1. 创建表格 2.分页表格 3. 添加事件 4. 完整前端分页代码二.后端分页 1.编写请求数据的函数 2.引用请求函数 3 ...
antd表格显示分页怎么取消_react antd分页后，表格筛选后不能触发重新分页
如图,参照官网表格demo,为表格添加分页的total(图一),当按Age为32进行筛选后,分页没进行刷新,实际筛选出来的应该是7条而不是16条(图二),如果把表格的pagination属性去掉使用a ...

antd 表格分页功能

表格分页

antd 表格分页功能相关推荐

最新文章

热门文章