一、參考資料：

1.thinkphp: https://www.kancloud.cn/special/thinkphp5_quickstart

2.layui: http://www.layui.com/doc/modules/table.html

二、程式碼：

主體html

<table id="demo" lay-filter="test"></table>

JS構建：（此處採用自動構建）

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一個例項
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: '/demo/table/user/' //資料介面
    ,page: true //開啟分頁
    ,cols: [[ //表頭
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '使用者名稱', width:80}
      ,{field: 'sex', title: '性別', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '簽名', width: 177}
      ,{field: 'experience', title: '積分', width: 80, sort: true}
      ,{field: 'score', title: '評分', width: 80, sort: true}
      ,{field: 'classify', title: '職業', width: 80}
      ,{field: 'wealth', title: '財富', width: 135, sort: true}
    ]]
  });
  
});
</script>
 

■首先引入layui.js

height:支援數字或者“full-100”等；

url:從控制器端返回符合格式的JSON資料，資料格式見官網手冊；之前在學習這裡的時候浪費不少時間，其實很簡單。就是TP5控制器呼叫模型方法獲取資料，並構建一個符合條件的陣列，再JSON()格式化；

$data = Model($model)->getDataM($condition,$searchVal);

$res = ['code'=>0,'msg'=>'','count'=>$total,'data'=>$data];
        return json($res);

cols:表頭可以自己寫，推薦將表頭資訊寫入資料表，並用上述方式返回。