PHP读取mysql数据输出到layui数据表格(方法渲染)

看到layui相关的帖子都是20年左右的,官方文档有些地方还是有点笼统,这里做一些简单的探索。
后端:PHP
数据库:MySQL

问题:

数据表格(table)方法渲染,案例中采用js文件,网上案例多为Java案例,PHP可读性较好,读取数据库相对简单,但案例缺乏。

思路:

阅读官方文档后发现,数据表格方法渲染中URL属于一种传值方法(get方式)的实现,所以思路为后端输出layui.table支持的数据格式,然后返回到前端即可。

案例:

简单数据表格,如图所示:
数据表格案例
HTML声明头略过,body部分前端如下:

<table id="demo"  class="layui-table" lay-filter="test"></table>
<script>
    layui.use('table', function () {
        var table = layui.table,
            url = 'test_table_data.php';
        // render the table component
        table.render({
            elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
            ,url: url
            ,cols: [[ {field: 'id', title: 'ID'},
                {field: 'real_name', title: 'Name'},
                {field: 'sex', title: 'Sex'},
                {field: 'birthday', title: 'Birthday'}
            ]]//设置表头
            ,even: true //开启隔行背景
            ,parseData:function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res //解析数据列表
                };
            }
        });
    });
</script>

其中lay-filter参数此案例中可以取消(用于toolbar对象定义,其他用途待探索)。
URL参数test_table_data.php与此前端在同目录下,其余地址对应更改。
parseData为数据格式解析回调参数,用于规范返回数据的回调,若返回数据不符合layui.table支持格式会报错(多为回调参数的名称与支持的回调参数名称不同,需要在parseData中重新定义,官方文档较为详细)。格式相符可不使用。

后端PHP输出json格式数据,为layui.table支持数据格式。

<?php
include "../connectDB.php";//连接数据库,不再展示
$sql = "select * from testtable1";
$result = mysqli_query($conn,$sql);
$data = array();

//人工定义解析回调
//if($result){
//    echo json_encode(array("code"=>0,"msg" => "success"));
//}else{
    alert('评价失败','task_rate.php');
//    echo json_encode(array("code"=>1,"msg" => "failed"));
//}

while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
$json_data = json_encode($data);
echo $json_data;

此案例中读取MySQL数据直接输出打包json数据。

Tips:
也可以把后端代码嵌入前端,将打包好的json文件输出到data参数,可达到相同的渲染效果。

  table.render({
            elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
            ,data:<?php echo json_encode($data)?>
            // ,url: url1
            ,id: 'test_table'
            ,cols:  ……
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值