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

目录
  • 前端
    • 按照上面的思路去设计与写翻页器的函数
  • 后端(以java为例)
    • 注意

前端

首先需要熟悉前端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)

相关推荐

  • react.js 翻页插件实例代码

    废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

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

    目录 前端 按照上面的思路去设计与写翻页器的函数 后端(以java为例) 注意 前端 首先需要熟悉前端react中table中的属性pagination <Pagination onChange={onChange} total={50} /> <Table bordered columns={columns} rowKey={record => record.id} dataSource={dataSource} pagination={pagination}/> 其中pa

  • Django实现翻页的示例代码

    Django提供了翻页器.用Django的Paginator类实现 一.views模块导入Paginator类实现数据分页 ApiTest/apiviews.py 每行都加了注释,希望有助于理解. from django.shortcuts import render from ApiTest.models import ApiTest from django.contrib.auth.decorators import login_required from django.core.pagin

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • Android通过手势实现答题器翻页效果

    本文实例为大家分享了Android答题器翻页功能,主要使用ViewFilpper和GestureDetector来实现,供大家参考,具体内容如下 1.效果图 2.实现思路 把Activity的TouchEvent事件交个GestureDetector来处理,然后使用ViewFilpper使用动画控制多个组件的之间的切换效果.手势的一个Api就不详细说了,大家如果不了解可以查一下. 3.实现的步骤 1).构建手势检测器 2).准备数据 3).为ViewFilpper添加子控件. 4).初始化Ani

  • 通过MySQL优化Discuz!的热帖翻页的技巧

    写在前面:discuz!作为首屈一指的社区系统,为广大站长提供了一站式网站解决方案,而且是开源的(虽然部分代码是加密的),它为这个垂直领域的行业发展作出了巨大贡献.尽管如此,discuz!系统源码中,还是或多或少有些坑.其中最著名的就是默认采用MyISAM引擎,以及基于MyISAM引擎的抢楼功能,session表采用memory引擎等,可以参考后面几篇历史文章.本次我们要说说discuz!在应对热们帖子翻页逻辑功能中的另一个问题. 在我们的环境中,使用的是 MySQL-5.6.6 版本. 在查看

  • Android实现阅读APP平移翻页效果

    自己做的一个APP需要用到翻页阅读,网上看过立体翻页效果,不过bug太多了还不兼容.看了一下多看阅读翻页是采用平移翻页的,于是就仿写了一个平移翻页的控件.效果如下: 在翻页时页面右边缘绘制了阴影,效果还不错.要实现这种平移翻页控件并不难,只需要定义一个布局管理页面就可以了.具体实现上有以下难点: 1.循环翻页,页面的重复利用. 2.在翻页时过滤掉多点触碰. 3.采用setAdapter的方式设置页面布局和数据. 下面就来一一解决这几个难点.首先看循环翻页问题,怎么样能采用较少的页面实现这种翻页呢

  • ASP项目中的公共翻页模块

    在大型的ASP项目中,很多的页面都涉及到翻页功能.如果每个页面都写一个翻页的程序的话,这样的工作即降低了工作效率,也不利于工程的模块化,不能使代码重用.因此,把翻页这样的功能模块化是很有必要的.   设计方法:  1.调用该模块时,只需要传递记录集和每页显示的记录的条数:  2.可以点击链接进行翻页,也可以直接输入页码,回车后翻页:  3.不要考虑文件名,程序的每次翻页都能在当前页面. 想清楚了上面3个问题,我们的公共翻页模块就可以动手了. <%  '++++++++++++++++++++++

  • Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

  • MongoDB快速翻页的方法

    翻阅数据是MongoDB最常见的操作之一.一个典型的场景是需要在你的用户界面中显示你的结果.如果你是批量处理的数据,同样重要的是要让你的分页策略正确,以便你的数据处理可以规模化. 接下来,让我们通过一个例子来看在MongoDB中翻阅数据的不同方式.在这个例子中,我们有一个CRM数据库的用户数据,我们需要通过翻阅浏览和在同一时间显示10个用户.所以实际上,我们的页面大小是10.下方是我们的用户文档的结构: { _id, name, company, state } 方法一:Using skip()

随机推荐