layui数据表格的普通使用

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>

效果图：