layui数据表格的普通使用

最新推荐文章于 2024-05-03 10:07:22 发布

原创最新推荐文章于 2024-05-03 10:07:22 发布 · 318 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui数据表格的使用 #layui #数据表格

笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了一个使用PHP返回数据并结合layui框架在前端展示数据的实例。通过PHP脚本生成包含用户信息的JSON数据，然后利用layui的table组件在网页上呈现这些数据为一个响应式的表格。

PHP返回数据

<?php
namespace app\data\controller;
use think\Controller;
class Data extends controller
{
   public function data(){
       $data = array(array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>26,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>29,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),
           array("id"=>10000,"username"=>"user-0","sex"=>"女","city"=>"城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"=>82830700,"classify"=>"作家","score"=>57),);
       $datas = array("code"=>0,"msg"=>'',"count"=>1000,"data"=>$data);

       echo json_encode($datas,JSON_UNESCAPED_UNICODE);
   }
}

HTML前台显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        *{
            margin: 0;
            padding:0;
        }
    </style>
</head>
<body>

<table class="layui-table" lay-data="{height: 'full-0', cellMinWidth: 80, page: true, limit:30, url:'/data/data/data'}">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox'}">ID</th>
        <th lay-data="{field:'id', width:100, sort: true}">ID</th>
        <th lay-data="{field:'username', width:100}">用户名</th>
        <th lay-data="{field:'sex', width:100, sort: true}">性别</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'city', width:100, sort: true}">城市</th>
        <th lay-data="{field:'sign', minWidth: 150}">签名</th>
        <th lay-data="{field:'experience', sort: true, align: 'right'}">积分</th>
        <th lay-data="{field:'score', sort: true, minWidth: 100, align: 'right'}">评分</th>
    </tr>
    </thead>
</table>


<script src="static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
    });
</script>

</body>
</html>

效果图：

效果图