怎么利用layui美化table数据表格


本文摘自PHP中文网,作者V,侵删。

首先我们来看下美化后的效果图:

(学习视频分享:html视频教程)

fd8e8afbf8e109fe314d5186a293473.png

具体步骤:

1、引入layui的css和js文件

1

2

<link rel="stylesheet" href="lib/layui/css/layui.css">

<script src="lib/layui/layui.js"></script>

2、在页面放置一个table元素

1

<table class="layui-hide" id="test" lay-filter='test3'></table>

3、通过 table.render() 方法指定该容器

4、这个时候你的页面差不多就是以下这个样子了

d76dd4e3a3de459d7baf481819bfbeb.png

5、正文到了,怎么把表格数据渲染进去呢?咱们上面第三部就是渲染的一中方法,叫“方法渲染”,layui官网提供的三种渲染方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post。

6、容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你没配置后台数据格式

阅读剩余部分

相关阅读 >>

layui表格怎么清空

layui日期控件使用(实例)

layui数据表格隐藏列的方法介绍

layui如何使用jquery

如何解决vue中layui报错问题

div和table在网站中的可用性比较

layui怎么用open属性隐藏按钮

layui怎么实现下载功能

cellpadding和cellspacing之间的区别

html里关于表格table嵌套的注意事项

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...