刷新Layui数据表格的当前页（刷新后仍是当前页，不是表格的第一页）

浅浅的花香味﹌ 2023-02-08 15:49 3阅读 0赞

### 文章目录 ###

*  一. 问题背景
 *  二. 解决方案

# 一. 问题背景 #

后台：SpringBoot  
前端：Layui

**情况：自定义一个刷新按钮，点击后，使得表格刷新仍留在当前页**

参考自：[Layui官方文档的数据表格重载][Layui]

# 二. 解决方案 #

**首先效果：**  
刷新前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

刷新后：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

**这里只给出一种解决方案，由于渲染数据表格的方式不同，解决方案都会略有不同，但是都是大同小异，最关键的部分是不变的。**

**这里给出的解决方案是只重载数据，没有实现条件搜索的重载，也是大同小异，看懂下面的关键代码就可以去[Layui官方文档的数据表格重载][Layui]学习如何实现条件搜索的重载。**

**最最最关键的代码，注意代码中的注释**，如下：

//监听“刷新”按钮
    $("#refresh").on('click', function(){ 
          //只重载数据，不实现条件搜索的重载
         table.reload('demoId', { //demoId是table.render()中id属性的值，如果没有设置，
                                 //layui2.2.x版本之后默认自动设置为<table>中的id属性值
             url: '/user/getPage'//这是发送给controller的请求来获取数据，
                                 //一般只需设为和table.render()中的url属性值即可
             ,page: { 
                 curr: currPage,//currPage是全局变量，后面会给出它在哪里定义以及赋值
             }
         });
     });

**定义currPage以及将当前页码赋值它，注意代码中的注释**，如下：

有问题的小伙伴可留言

[Layui]: https://www.layui.com/doc/modules/table.html#reload
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230208/9fdda4f1da0d4e4eaa1a4b6740d67af5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230208/3b5d528d84ed4edabbe9af4596b73296.png