关于LayUIAdminPro使用table.render分页时,需要修改分页携带的参数的办法(LayUI踩坑篇三)

文中的LayUIAdminPro版本为v2020.4.1。使用的软件是IDEA,你问我为什么不用vsCode?为了偷懒,就使用IDEA。

虽然实习的岗位是Java后端,但是工作的内容还是需要负责前端的一些东西,例如后台页面,公司前端使用的是LayUI框架。对于已经使用了三个月LayUI的我来说,LayUI的坑还是挺多的。闲话少说,接下来进入正片。

我们使用LayUI时的table.reder()获取数据时,LayUI关于分页携带的参数为page和limit两个参数。
在这里插入图片描述
如果只是小项目的话,我们可以在接口里单独使用这两个参数去获取数据,然而,在公司里,可能会把分页的信息封装成一个类,例如我在实习的时候,公司就是把分页信息封装成一个pageable类,这样的话,我们就需要LayUI传递过来的参数是一个pageable类。

public class Pageable {
    private int page;
    private int size;
    private String sort;
    private boolean desc;
	...
}

LayUI传递的两个参数不满足我们的需求,需要让LayUI传递过来的是一个pageable对象,那么我们就需要修改LayUI的js文件。下面是LayUIAdminPro项目的目录,我们需要修改start/layui/lay/modules/table.js文件。
在这里插入图片描述
打开后看到的是这样的,这显然不是给人看的东西,我们需要使用快捷键Ctrl+Alt+L对代码进行格式化。
在这里插入图片描述
在这里插入图片描述
Idea的快捷键可以看下面这篇文章,很全。
https://blog.csdn.net/qq_38963960/article/details/89552704

格式化后,代码长这个样子,这才是给人看的东西。
在这里插入图片描述
同样使用IDEA的同学,可以直接翻到187行。用其他软件进行格式化,位置可能不同(例如我同事使用vsCode就不是187行)。其他同学复制下面这一句,进行搜索即可。

if (i.startTime = (new Date).getTime(), a.url) {

在这里插入图片描述
分页携带的参数就是图中圈起来的代码,对文中圈起来的代码进行修改。
在这里插入图片描述

let pageable ={};
pageable['pageable']={}
pageable.pageable['size']=a.page.limit;
pageable.pageable['page']=a.page.curr;
pageable.pageable['sort']=a.page.sort;
pageable.pageable['desc']=a.page.desc;

var d = t.extend(pageable, a.where);

修改完后,重新点击分页按钮,携带的参数就是我们需要的pageable对象啦~
在这里插入图片描述

实用小知识:IDEA使用Ctrl+E键,可以查看刚关闭的文件。


版权声明:本文为qq_36903261原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。