• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

React翻页器的实现(包含前后端)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前端

首先需要熟悉前端react中table中的属性pagination

<Pagination onChange={onChange} total={50} />

<Table bordered columns={columns} rowKey={record => record.id} dataSource={dataSource}
       pagination={pagination}/>

其中pagination我们自己去实现的函数,因为在react中只给出静态样例
我们可以去查看react文档中,给的示例的是如下图

 

其中提示我们函数的参数为current及pageSize
那么我们可以按照文档中的提示去思考
是否可以给函数传入当前页和每页的最大数据量

按照上面的思路去设计与写翻页器的函数

const pagination = {
    showQuickJumper:true,
    showSizeChanger:[],
    total: this.example.total,
    defaultCurrent: this.example.page,
    current: this.example.page,
    pageSize: this.example.pageSize,
    hasNextPage: this.example.hasNextPage,
    onShowSizeChange: (current, size) => {
         // 每页的最大数据量
        self.example.pageSize = size;
        // 当前页
        self.example.page = current;
        // 将两个参数封装在一个temple中
        let temple = {
            page : self.example.page,
            pageSize : self.example.pageSize
        };
        // 最终重新去请求函数,将当前页与每页的数据最大量传入重新请求的参数
        self.onFetch(temple);
    },
    onChange(current, pageSize) {
        self.example.pageSize = pageSize;
        self.example.page = current;
        
        let temple = {
            page : self.data.search.page,
            pageSize : self.data.search.pageSize,
        };
        self.onFetch(temple);
    }
};

此刻我们已经实现了翻页器的前端的函数
那么就可以在table中的pagination中传入pagination

后端(以java为例)

首先我们需要写一条SQL

select id from stu limit ${(page - 1)*(pageSize)}, ${pageSize + 1}

解读SQL,有人可能会问pageSize为什么会加1
因为例如

countSize是201 pageSize是20 你直接除结果是10 但是实际上需要的是11

我们后端可以使用mybatis-helper或者自己封装PageList
最终可以将从数据库中查出的数据放到PageList中,再返回给前端
前端会收到后端传入的数据总数(total)每页的最大数量(pageSize)

对于SQL传参的问题

当我们写

SELECT
 id
FROM
 stu
LIMIT 1,10

查出的数据是 218 222 220 217 219 221 8 9 10 12
如果我们把1改成2,那么查出的数据为 222 220 217 219 221 8 9 10 12 14
这就是我们为什么在sql里面写的是(page - 1)*(pageSize)
因为当limit传入10,10的时候才能真正将数据刷新一遍
否则前端传入page=2的时候,我们只在后端更新了一条数据,而重叠了相当于pageSize-1的数据量

注意

当我们SQL写成(page-1)的时候,前端的默认页一定要传入的值从1开始,否则传入0,就会出现负数
我们的后端就会产生报错

关于如何优化limit,可以参考我的另一篇文章「深究MySQL之select优化

到此这篇关于React翻页器的实现(包含前后端)的文章就介绍到这了,更多相关React翻页器内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue实现模糊查询的简单方法实例发布时间:2022-02-05
下一篇:
vue.js实现简单计时器功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap